学习要点：
1.使用validate.js插件
2.默认验证规则
3.validate()方法和选项
1.使用validate.js插件
2.默认验证规则
3.validate()方法和选项
4.validate.js其他功能
验证插件（validate.js），是一款验证常规表单数据合法性的插件。使用它，极大的解放了表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验。
一、使用validate.js插件
官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation
最重要的文件是validate.js，还有两个可选的辅助文件：additional-method.js（控件方式）和message_zh.js（提示汉化）文件（实际使用，请使用min压缩版）。
官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation
最重要的文件是validate.js，还有两个可选的辅助文件：additional-method.js（控件方式）和message_zh.js（提示汉化）文件（实际使用，请使用min压缩版）。
第一步：引入validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步：在JS文件中执行
$("#reg").validate()；
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步：在JS文件中执行
$("#reg").validate()；
二、默认验证规则
validate.js的默认验证规则的写法有两种形式：1.控件属性方式；2.JS键值对传参方式。
validate.js的默认验证规则的写法有两种形式：1.控件属性方式；2.JS键值对传参方式。
默认规则列表
规则名：required:true，说明：必须输入字段
规则名：email:true，说明：必须输入正确格式的电子邮件
规则名：url:true，说明：必须输入正确格式的网址
规则名：date:true，说明：必须输入正确格式的日期（IE6验证出错）
规则名：dateISO:true，说明：必须输入正确格式的日期(ISO)(只验证格式，不验证有效)
规则名：number:true，说明：必须输入合法的数字（负数，小数）
规则名：digits:true，说明：必须输入正整数
规则名：creditcard:true，说明：必须输入合法的信用卡号
规则名：equalTo:"#field"，说明：输入值必须和#field相同
规则名：required:true，说明：必须输入字段
规则名：email:true，说明：必须输入正确格式的电子邮件
规则名：url:true，说明：必须输入正确格式的网址
规则名：date:true，说明：必须输入正确格式的日期（IE6验证出错）
规则名：dateISO:true，说明：必须输入正确格式的日期(ISO)(只验证格式，不验证有效)
规则名：number:true，说明：必须输入合法的数字（负数，小数）
规则名：digits:true，说明：必须输入正整数
规则名：creditcard:true，说明：必须输入合法的信用卡号
规则名：equalTo:"#field"，说明：输入值必须和#field相同
规则名：minlength:5，说明：输入长度最小是5的字符串（汉字算一个字符）
规则名：maxlength:10，说明：输入长度最多是10的字符串（汉字算一个字符）
规则名：rangelength:[5,10]，说明：输入长度介于5和10之间的字符串（汉字算一个字符）
规则名：range:[5,10]，说明：输入值必须介于5和10之间
规则名：min:5，说明：输入值不能小于5
规则名：max:10，说明：输入值不能大于10
规则名：remote:"check.php"，说明：使用ajax方法调用check.php验证输入值
规则名：maxlength:10，说明：输入长度最多是10的字符串（汉字算一个字符）
规则名：rangelength:[5,10]，说明：输入长度介于5和10之间的字符串（汉字算一个字符）
规则名：range:[5,10]，说明：输入值必须介于5和10之间
规则名：min:5，说明：输入值不能小于5
规则名：max:10，说明：输入值不能大于10
规则名：remote:"check.php"，说明：使用ajax方法调用check.php验证输入值
//使用控件方式验证“必填和不得小于两位”
<input type="text" class="required" minlength="2" name="user" id="user" />
<input type="text" class="required" minlength="2" name="user" id="user" />
注意：默认规则里设置布尔值的，直接写到class里即可实现。如果是数字或数组区间，直接属于属性=值得方式即可。而对于错误提示是因为，可以引入中文汉化文件，或直接替换掉即可。
//使用JS对象键值对传参方式设置
$("#reg").validate({
rules:{
user:{
required:true, //只有一个规则的话
minlength:2, //直接user:"required",
},
},
messages:{
user:{
required:"账号不得为空！"，
minlength:"账号不得小于2位！"，
},
}
});
注意：由于第一种形式不能设置指定的错误提示信息，我们推荐使用第二种形式，第二种形式也避免HTML污染。
//所有规则演示
$("#reg").validate({
rules:{
email{
email:true,
},
url:{
url:true,
},
date:{
date:true,
},
dateISO:{
dateISO:true,
},
number:{
number:true,
},
digits:{
digits:true,
},
creditcard:{
creditcard:true,
},
notpass:{
equalTo:"#pass",
},
min:{
min:5,
},
range:{
range:[5,10],
},
rangelength:{
rangelength:[5,10],
},
},
message:{.....}
});
三、validate()的方法和选项
除了默认的验证规则外，validate.js还提供了大量的其他属性和方法供开发者使用。比如，调试属性，错误提示位置一系列比较有用的选项。
//jquery.format格式化错误提示
除了默认的验证规则外，validate.js还提供了大量的其他属性和方法供开发者使用。比如，调试属性，错误提示位置一系列比较有用的选项。
//jquery.format格式化错误提示
$("#reg").validate({
rules:{
user:{
required:true,
minlength:5,
rangelength:[5,10]
},
},
messages:{
user:{
required:"账号不得为空！"，
minlength:jQuery.format("账号不得小于{0}位！")，
rangelength:jQuery.format("账号限制在{0}-{1}位！"),
},
},
});
//开启调试模式禁止提交
$("#reg").validate({
debug:true,
});
$("#reg").validate({
debug:true,
});
//设置调试模式为默认，可以禁止多个表单提交
$.validator.setDefaults({
debug:true,
});
$.validator.setDefaults({
debug:true,
});
//使用其他方式代替默认提交
submitHandler.function(form){
//可以执行ajax提交，并且无须debug:true阻止提交了
submitHandler.function(form){
//可以执行ajax提交，并且无须debug:true阻止提交了
//当验证成功后执行，而且阻止了默认提交使用
};
};
//忽略某个字段验证
ignore:"#pass",
ignore:"#pass",
//群组错误提示
groups:{
myerror:"user pass",
},
//显示群组的错误提示
focusInvalid:false,
errorPlacement:function(error,element){
$.each(error,function(index,value){
$(".myerror").html($(".myerror").html()+$(value).html());
})
}
//群组错误提示，分开
groups:{
error_user:"user",
error_pass:"pass"
},
//将群组的错误指定存放位置
errorPlacement:function(error,element){
error.appendTo(".myerror")
},
//设置错误提示的class名
errorClass:"error_list",
//设置错误提示的标签
errorElement:"p",
//统一包裹错误提示
errorLabelContainer:"ol.error",
wrapper:"li",
//设置成功后加载的class
success:"success",
//使用方法加载class并添加文本
success:function(label){
label.addClass("success").text("ok"),
},
//高亮显示有错误的元素，变色式
highlight:function(element,errorClass){
$(element).css("border","1px solid red");
},
//成功的元素移出错误亮度
unhighlight:function(element,errorClass){
$(element).css("border","1px solid #ccc");
},
//表单提交时获取信息
invalidHandler:function(event,validator){
var errors=validator.numberOfInvalids();
if(errors){
$(".myerror").html("您有"+errors+"个表单元素填写非法！")
}
},
//获取错误提示句柄，不用提交及时获取值
showErrors:function(errorMap,errorList){
var errors=this.numberOfInvalids();
if(errors){
$(".myerror").html("您有"+errors+"个表单元素填写非法！");
}else{
$(".myerror").hide();
}
this.defaultShowErrors(); //执行默认错误
}
//获取错误提示句柄,errorList
showErrors:function(errorMap,errorList){
alert(errorList[0].message); //得到错误信息
alert(errorList[0].element); //当前错误的表单元素
},
四.validate.js其他功能
使用remote:url，可以对表单进行ajax验证，默认会提交当前验证的值到远程地址。如果需要提交其他的值，可以使用data选项。
//使用ajax验证
//使用ajax验证
rules:{
user:{
required:true,
minlength:2,
remote:"user.php",
},
},
//user.php内容
<?php
if($_GET["user"]=="bnbbs"){
echo "false";
}else{
echo "true";
}
?>
注意：远程地址只能输出“true”或“false”，不能输出其他值。
//同时传递多个值到远程端
pass:{
required:true,
minlength:2,
remote:{
url:"user.php",
type:"POST",
dataType:"json",
data:{
user:function(){
return $("#user").val();
},
},
},
},
//user.php内容
<?php
if($_POST["user"]!="bnbbs"||
$_POST["pass"]!="123456
){
echo "false";
}else{
echo "true";
}
?>
validate.js提供了一些事件触发的默认值，这些值大部分是不用更改的。
//取消提交验证
onsubmit:false, //默认是true
注意：设置为false会导致直接系统直接提交，不会实现验证功能，一般是用于keyup/click/blur验证提交。
//取消提交验证
onsubmit:false, //默认是true
注意：设置为false会导致直接系统直接提交，不会实现验证功能，一般是用于keyup/click/blur验证提交。
//设置鼠标离开不触发验证
onfocusout:false, //默认为true
onfocusout:false, //默认为true
//设置键盘按下弹起不触发验证
onkeyup:false, //默认为true
注意：只要设置了，在测试的浏览器不管是false还是true都不触发了。
onkeyup:false, //默认为true
注意：只要设置了，在测试的浏览器不管是false还是true都不触发了。
//设置点击checkbox和radio点击不触发验证
onclick:false, //默认为true
onclick:false, //默认为true
//设置错误提示后，无法获取焦点
focusInvalid:false, //默认为true
focusInvalid:false, //默认为true
//提示错误时，隐藏错误提示，不能和focusInvalid一起用，冲突
focusClearup:true, //默认为false
focusClearup:true, //默认为false
如果表单元素设置了title值，且messages为默认，就会读取title值得错误信息，我们可以通过ignoreTitle:true,设置为true，屏蔽这一个功能。
ignoreTitle:true, //默认为false
ignoreTitle:true, //默认为false
//判断表单所验证的元素是否全部有效
alert($("#reg").valid()); //全部有效返回true
alert($("#reg").valid()); //全部有效返回true
validate.js提供了可以单独验证每个表单元素的rules方法，不但提供了add增加验证，还提供了remove删除验证的功能。
//给user增加一个表单验证
//给user增加一个表单验证
$("#reg").rules("add",{
required:true,
minlength:2,
messages:{
required:"账号不得为空！"，
minlength:jQuery.format("账号不得小于{0}位！")
}
});
//删除user的所有验证规则
$("#user").rules("remove");
$("#user").rules("remove");
//删除user的指定验证规则
$("#user").rules("remove","minlength min max");
$("#user").rules("remove","minlength min max");
//添加自定义验证
$.validator.addMethod("code",function(value,element){
$.validator.addMethod("code",function(value,element){
var tel=/^[0-9]{6}$/;
return this.optional(element)||(tel.test(value));
},"请正确填写您的邮政编码");
//调用自定义验证
rules:{
code:{
required:true,
code:true,
}
},
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
