jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
jQuery Validate插件
导入
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>说明：注意文件引入顺序：在使用jQuery插件时，一定先引入jQuery文件，再引入其他插件文件。
页面准备
html部分源代码：
<body>
<form action="Demo01.html" method="get" id="fform">
姓名<input type="text" name="username" id="username"/><br />
密码<input type="password" name="password" id="password"/><br />
再次<input type="password" name="repassword" id="repassword"/><br />
年龄<input type="text" name="age" id="age"/><br />
邮箱<input type="text" name="email" id="email"/><br />
电话<input type="text" name="phone" id="phone"/><br />
<div>
爱好 <input type="checkbox" value="football" name="hobby"/>足球
<input type="checkbox" value="basketball" name="hobby"/>篮球
<input type="checkbox" value="volleyball" name="hobby"/>排球
</div><br />
<input type="submit" value="submit" onclick="submitForm()"/>
</form>
</body>注意这里一定要设置name和id属性值，因为后面进行验证的时候，IE浏览器会通过id值进行验证，而其他所有浏览器都以name值进行验证，所以这里需要把id值和name值设置成一样。还有后面三个复选框一定要用一个容器给包起来，我这里用了div，因为后面会进行设置提示信息，而提示信息的位置会在标签的后面，而如果不把这三个复选框包起来的话，提示信息就会出现在第一个复选框的后面。
校验方式
var result; //因为后面两个函数都会用到，所以设置为全局变量
$(function(){
// 返回值result.form()为true 说明验证通过，可以提交
//myForm是from表单的id，result是用来接收结果，其他的为固定格式
result = $('#myForm').validate({
//1 指定标签的验证规则（对哪个表单项，进行什么样的校验）
//2指定验证不能通过时的提示信息
//3 指定提示信息显示的位置
});
});
//这个函数是定义在提交按钮上的
function subForm(){
if(result.form()){
return true; // 提交
}else{
return false;
}
}我们可以看到上面有三个步骤，我们进行验证的时候就需要用到这三个部分的功能。
我们将三个功能，从上往下讲解：
首先，我们可以去validate.js中查看（可以Ctrl+f 搜索message来进行获取）：
这里前面的红框1，就是进行校验的关键字，而后面的就是如果出错的话的提示信息：
写到这里，可以先把所有源代码给出(记得看注释，注释很重要）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="../css/jquery.validate.css" />-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<!-- <script type="text/javascript" src="../js/test_phone.js" ></script>
<script type="text/javascript" src="../js/message_cn.js" ></script>-->
<script>
var result;
$(function(){
result = $("#fform").validate({
//1.对表单中哪个字段采用哪些校验规则
//rules是关键字
rules:{
username:{
required:true,
maxlength:12,
minlength:4
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
equalTo:'#password'
},
age:{
number:true,
range:[0,150]
},
email:{
email:true
},
/*phone:{
phone:true
},*/
hobby:{
maxlength:2
}
},
//2.校验不通过的时候的提示信息：自定义信息，不设置可以有默认信息，上图红框2
//messages关键字
messages:{
username:{
/*
* 我们从上面的图中的第二个红框里可以得到默认的错误信息提示
* 但是都是英文的，所以我们可以进行自定义，自定义方式如下
* 第一种，就是没有参数的，像下面的required一样，直接在后面接字符串
* 第二种是有参数的，像下面的需要设置长度或者再下面设置一个范围的，需要用特定的
* 如下面的格式进行验证，当然，也可以自己进行定义（还是后面直接接字符串），但是用这样的特定
* 格式的好处是，在需求改变的时候，我们对源代码进行修改的我们只需要修改上面的rules里面的参数
* 而不用两边都修改了，减少了以后的工作量也减少了失误率。
*/
required:"用户名不能为空",
maxlength:$.validator.format( "最多{0}个字符" ),
minlength:$.validator.format( "最少{0}个字符" )
},
password:{
required:"密码不能为空",
rangelength:$.validator.format( "密码请设置在{0}到{1}个字符长度" )
},
repassword:{
equalTo:"两次密码不一致"
},
age:{
number:"不能输入数字之外其他字符",
range:$.validator.format( "年龄请设置在{0}到{1}岁之间")
},
email:{
email:"请输入正确的邮箱"
},
hobby:{
maxlength:$.validator.format( "最多选择{0}个爱好")
}
},
//3.指定提示信息显示的位置
/*
* 下面一行的都为关键字，这里是设置错误信息显示的位置，主要是用jqery中的获取和修改元素内容的几个方法
* 因为我这里多选框那里用的是一个div包裹了起来，但是其他的都是要直接跟在了后面，所以进行了分别设置。
* 这里也可以得到，除了函数的声明，函数体是可以自己定义的。
* 这里的error是js文件打包好的错误信息，element指代的是我们进行验证的元素
*/
errorPlacement:function(error,element){
if($(element).prop("name")=="hobby")
error.appendTo(element.parent());
else
error.insertAfter(element);
}
});
})
function submitForm(){
if(result.from()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!-- 我这里下面的action里面的值是我自己定义的另一个网页，这里现在暂时是谁都可以，所以可以不写或者写一个读者自己定义的网页-->
<!-- 否则即便验证正确也会报服务器错误，不过只要最后能够跳转，就证明验证成功了，method参数可以随意设置，直接删掉也可以-->
<form action="Demo01.html" method="get" id="fform">
姓名<input type="text" name="username" id="username"/><br />
密码<input type="password" name="password" id="password"/><br />
再次<input type="password" name="repassword" id="repassword"/><br />
年龄<input type="text" name="age" id="age"/><br />
邮箱<input type="text" name="email" id="email"/><br />
电话<input type="text" name="phone" id="phone"/><br />
<div>
爱好 <input type="checkbox" value="football" name="hobby"/>足球
<input type="checkbox" value="basketball" name="hobby"/>篮球
<input type="checkbox" value="volleyball" name="hobby"/>排球
</div><br />
<input type="submit" value="submit" onclick="submitForm()"/>
</form>
</body>
</html>
通过上面的代码，我们可以很精确的进行位置的排布，和提示信息的输出。
我们可以发现，类似必填项，我们可以直接提示 “必填” 而不用设置的那么精确，用户依然会明白什么意思。所以，我们可以进行简略格式。
自定义提示信息文件
新建一个js文件，文件名自定义：我这里叫 ：message_cn.js
内容：
jQuery.extend(jQuery.validator.messages,{
required: "必填",
email: "邮箱格式错误",
number: "请输入一个数字",
equalTo: "两次密码不一致",
maxlength: $.validator.format( "最大长度为{0}" ),
minlength: $.validator.format( "最小长度为{0}" ),
rangelength: $.validator.format( "输入长度应在{0}~{1}之间" ),
range: $.validator.format( "输入范围在{0}~{1}之间" ),
})这里的第一行是固定格式，里面的内容是进行覆盖上面那张图片也就是validate插件里面的内容的。
这里可以解锁上面源代码中第10行代码的注释（该引入文件为上面的js文件）。
然后把后面的第二步的message全都给注释起来了。
随之我们会看到第九行的注释，然后我们还可以发现，我们下面进行对phone的验证的时候，用了一个phone的验证，但是我们validate插件中并没有phone关键字的验证，这是因为，电话号码大多数国家格式都是不一样的，所以没有进行整合到上面，所以，这也就提供了一个开放性的可以自定义验证的条件：
自定义验证规则
还是需要编写一个js文件：名字可自定义，我这里是test_phone.js 一般多写成 add_method.js
jQuery.validator.addMethod("phone",function(value,element){
var phoneRex = /^1[3456789]\d{9}$/;
if(phoneRex.test(value) || this.optional(element)){
return true;
}
},"请输入正确的手机号")这里的第一行，除了phone是自己定义的验证规则关键字外，其他的都是固定格式：
addMethod(参数1：验证规则关键字，参数2：验证函数 ，参数3：错误提示信息）
验证函数中第一行为验证电话号码的正则表达式，后面两个选项一个是验证正则表达式，另一个的作用是，输入框为空时也会返回true
否则，空字符串是不符合正则的，如果这一项为非必填项，那么空的字符串将永远无法完成验证，也就一直提交不了。
这时可以解开对phone的验证的注释
自定义提示信息样式
我们想到，既然是错误提示信息，那么提示信息应该是红色或者其他样式，那么我们怎么来设置提示信息的样式呢。
这里需要一个CSS样式文件。内容为规定的格式（可以自己创建，名字为jquery.validate.css 或者可以下载：）：
label.error {
color: red;
font-size:11px;
background: transparent url(image/unchecked.gif) no-repeat scroll 0 0;
}
label.checked {
background: transparent url(image/checked.gif) no-repeat scroll 0 0;
}然后再导入：（源代码第6行代码）
至此，我们可以进行自定义验证规则，自定义样式，自定义提示信息。
重要文件有：
最终源码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/jquery.validate.css" />
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/test_phone.js" ></script>
<script type="text/javascript" src="../js/message_cn.js" ></script>
<script>
var result;
$(function(){
result = $("#fform").validate({
//1.对表单中哪个字段采用哪些校验规则
//rules是关键字
rules:{
username:{
required:true,
maxlength:12,
minlength:4
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
equalTo:'#password'
},
age:{
number:true,
range:[0,150]
},
email:{
email:true
},
phone:{
phone:true
},
hobby:{
maxlength:2
}
},
//2.校验不通过的时候的提示信息：自定义信息，不设置可以有默认信息，上图红框2
//messages关键字
/*messages:{
username:{*/
/*
* 我们从上面的图中的第二个红框里可以得到默认的错误信息提示
* 但是都是英文的，所以我们可以进行自定义，自定义方式如下
* 第一种，就是没有参数的，像下面的required一样，直接在后面接字符串
* 第二种是有参数的，像下面的需要设置长度或者再下面设置一个范围的，需要用特定的
* 如下面的格式进行验证，当然，也可以自己进行定义（还是后面直接接字符串），但是用这样的特定
* 格式的好处是，在需求改变的时候，我们对源代码进行修改的我们只需要修改上面的rules里面的参数
* 而不用两边都修改了，减少了以后的工作量也减少了失误率。
*/
/*required:"用户名不能为空",
maxlength:$.validator.format( "最多{0}个字符" ),
minlength:$.validator.format( "最少{0}个字符" )
},
password:{
required:"密码不能为空",
rangelength:$.validator.format( "密码请设置在{0}到{1}个字符长度" )
},
repassword:{
equalTo:"两次密码不一致"
},
age:{
number:"不能输入数字之外其他字符",
range:$.validator.format( "年龄请设置在{0}到{1}岁之间")
},
email:{
email:"请输入正确的邮箱"
},
hobby:{
maxlength:$.validator.format( "最多选择{0}个爱好")
}
},*/
//3.指定提示信息显示的位置
/*
* 下面一行的都为关键字，这里是设置错误信息显示的位置，主要是用jqery中的获取和修改元素内容的几个方法
* 因为我这里多选框那里用的是一个div包裹了起来，但是其他的都是要直接跟在了后面，所以进行了分别设置。
* 这里也可以得到，除了函数的声明，函数体是可以自己定义的。
* 这里的error是js文件打包好的错误信息，element指代的是我们进行验证的元素
*/
errorPlacement:function(error,element){
if($(element).prop("name")=="hobby")
error.appendTo(element.parent());
else
error.insertAfter(element);
}
});
})
function submitForm(){
if(result.from()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!-- 我这里下面的action里面的值是我自己定义的另一个网页，这里现在暂时是谁都可以，所以可以不写或者写一个读者自己定义的网页-->
<!-- 否则即便验证正确也会报服务器错误，不过只要最后能够跳转，就证明验证成功了，method参数可以随意设置，直接删掉也可以-->
<form action="Demo01.html" method="get" id="fform">
姓名<input type="text" name="username" id="username"/><br />
密码<input type="password" name="password" id="password"/><br />
再次<input type="password" name="repassword" id="repassword"/><br />
年龄<input type="text" name="age" id="age"/><br />
邮箱<input type="text" name="email" id="email"/><br />
电话<input type="text" name="phone" id="phone"/><br />
<div>
爱好 <input type="checkbox" value="football" name="hobby"/>足球
<input type="checkbox" value="basketball" name="hobby"/>篮球
<input type="checkbox" value="volleyball" name="hobby"/>排球
</div><br />
<input type="submit" value="submit" onclick="submitForm()"/>
</form>
</body>
</html>
jquery.validate.css
label.error {
color: red;
font-size:11px;
background: transparent url(image/unchecked.gif) no-repeat scroll 0 0;
}
label.checked {
background: transparent url(image/checked.gif) no-repeat scroll 0 0;
}message_cn.js
jQuery.extend(jQuery.validator.messages,{
required: "必填",
email: "邮箱格式错误",
number: "请输入一个数字",
equalTo: "两次密码不一致",
maxlength: $.validator.format( "最大长度为{0}" ),
minlength: $.validator.format( "最小长度为{0}" ),
rangelength: $.validator.format( "输入长度应在{0}~{1}之间" ),
range: $.validator.format( "输入范围在{0}~{1}之间" ),
})test_phone.js
jQuery.validator.addMethod("phone",function(value,element){
var phoneRex = /^1[3456789]\d{9}$/;
if(phoneRex.test(value) || this.optional(element)){
return true;
}
},"请输入正确的手机号")
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
