jQuery使用简单示例 validate 插件-白红宇

jQuery使用简单示例 validate 插件

阅读量：4964 次

发布时间：2019-06-12

本文共 3451 字，大约阅读时间需要 11 分钟。

摘录自：用户登录

用户名

密码

确认密码

[html]

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>jQuery Validation 插件</title>

<link rel="stylesheet" href="style.css"/>

</head>

<body>

<form id="demoForm">

<fieldset>

<legend>用户登录</legend>

<p id="info"></p>

<label for="username">用户名</label>

<input type="text" id="username" name="username"/>

</p>

<label for="password">密码</label>

<input type="password" id="password" name="password"/>

</p>

<label for="confirm-password">确认密码</label>

<input type="password" id="confirm-password" name="confirm-password"/>

</p>

<input type="submit" value="登录"/>

</p>

</fieldset>

</form>

<script src="vendor/jquery-1.10.0.js"></script>

<script src="vendor/jquery.validate-1.13.1.js"></script>

<script>

var validator1;

$(document).ready(function () {

validator1 = $("#demoForm").validate({

debug: true,

rules: {

username: {

required: true,

minlength: 2,

maxlength: 10

password: {

required: true,

minlength: 2,

maxlength: 16

"confirm-password": {

equalTo: "#password"

}

messages: {

username: {

required: '请输入用户名',

minlength: '用户名不能小于2个字符',

maxlength: '用户名不能超过10个字符',

remote: '用户名不存在'

password: {

required: '请输入密码',

minlength: '密码不能小于2个字符',

maxlength: '密码不能超过16个字符'

"confirm-password": {

equalTo: "两次输入密码不一致"

}

highlight: function(element, errorClass, validClass) {

$(element).addClass(errorClass).removeClass(validClass);

$(element).fadeOut().fadeIn();

unhighlight: function(element, errorClass, validClass) {

$(element).removeClass(errorClass).addClass(validClass);

submitHandler: function (form) {

console.log($(form).serialize())

}

});

$("#check").click(function () {

console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");

});

});

</script>

</body>

</html>

[html]

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>jQuery Validation 插件</title>

<link rel="stylesheet" href="style.css"/>

<script src="/Public/js/jquery-1.10.0.js"></script>

<script src="/Public/js/jquery.validate-1.13.1.js"></script>

</head>

<body>

<form id="demoForm">

<fieldset>

<legend>用户登录</legend>

<p id="info"></p>

<label for="username">用户名</label>

<input type="text" id="username" name="username"/>

</p>

<label for="password">密码</label>

<input type="password" id="password" name="password"/>

</p>

<label for="confirm-password">确认密码</label>

<input type="password" id="confirm-password" name="confirm-password"/>

</p>

<label for="email">邮箱</label>

<input type="text" id="email" name="email"/>

</p>

<label for="phone">手机</label>

<input type="text" id="phone" name="phone"/>

</p>

<input type="submit" value="登录"/>

</p>

</fieldset>

</form>

<script>

$(document).ready(function(){

$("#demoForm").validate({

rules:{

username:{

required:true,

minlength:2,

maxlength:10,

password:{

required:true,

minlength:2,

maxlength:16,

email:{

required:true,

email:true,

phone:{

required:true,

rangelength:[11,11],

number:true

"confirm-password":{

equalTo:"#password"

}

messages:{

username:{

required:'请输入用户名！',

minlength:'最小为两个字符！',

maxlength:'最大为十个字符！'

password:{

required:'请输入密码！',

minlength:'最小为两个字符！',

maxlength:'最大为十六个字符！'

email:{

required:'邮箱必填！',

email:'email格式填写不正确!'

phone:{

required:'请输入手机号码！',

rangelength:'手机号码为11位',

number:'手机号必须为数字'

'confirm-password':{

equalTo:'两次输入密码不一致！'

}

submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form

alert("提交表单");

});

});

</script>

</body>

</html>

转载于:https://www.cnblogs.com/haimishasha/p/6188594.html

你可能感兴趣的文章

STL::forward_list

查看>>

20144303 20145239 《信息安全系统设计基础》实验五网络通信

【iOS-cocos2d-X 游戏开发之七】整合Cocos2dX的Android项目到Xcode项目中,Android导入打包运行即可！...

查看>>

对string的一些扩展函数分类： C/C++ 2...

hdu--4504--又是dp啊<方案决策数>

查看>>

CSS格式、排版

查看>>

VSCODE Net Core 2.0 MVC