两个概念:
method:验证方法,指的是校验的逻辑
rule :验证规则,指的是元素和验证方法的关联
validate()方法:validation插件的核心方法,定义了基本的校验规则和一些有用的配置项。
如:debug参数设置为true,则表单不会提交,只进行检查,用于调试。
validation插件的基本验证方法之一:
1、required:必填校验(true表示必填)
2、remote:远程校验,用于通过访问服务器来校验数据的有效性;
如校验用户名是否存在
remote用法:
1、remote使用get请求访问服务器
访问服务器后返回校验结果:正常的时候返回true,检验不通过的时候返回错误提示信息
remote:url
2、remote使用post请求访问服务器
remote:{
url:请求地址
type:请求类型post/get
data:{
需要传递的参数
}
}
validation插件的基本验证方法之二:
长度校验:
3、minlength:最小长度验证
4、maxlength:最大长度验证
5、rangelength:长度范围,
如:rangelength:[minlength,maxlength]可用于代替minlength和maxlength
数值校验
6、min:数值最小值校验
7、max:数值最大值校验
8、range:数值范围校验,
range:[min,max]可代替min和max
PS:以上验证方法的值都为数字
validation插件的基本验证方法之三:
9、email:Email格式校验
10、url:url格式校验,需要带“http://”或“https://”等前缀
11、date:日期校验,使用的是js的date类型,只要能被Date.parse识别的都是有效的
12、dateISO:ISO日期校验,格式必须为yyyy/MM/dd或yyyy-MM-dd的
PS:以上验证方法的值都是boolean类型,true表示进行验证
validation插件的基本验证方法之四:
13、number:数字验证,任意整形、非整形、负数、整数皆可
14、digits:整数验证,必须为大于等于0的数字
PS:以上验证方法的值为boolean,true表示进行验证
15、equalTo:与另一个元素值相等验证,值为选择器,表示是和那一个元素的值比较
如:equalTo:"#password",表示用当前元素的值和id="password"元素的值相比较
$("#form").valid()?"correct":"error"; //valid()方法:检查表单或某些元素是否有效,返回值为boolean型,
全部通过检查规则返回true,只要有不通过的检查规则都返回false
rules只针对表单里的元素,而不是某个整个表单(会抛出错误)
1.可以使用rules("add",{})的方法来为元素添加规则,如:
$("#username").rules("add",{minlength:2,maxlength:10})
2.可以使用rules("remove",{})的方法来为元素去掉规则,如:
$("#username").rules("remove","email")
3.可以使用rules()无参数的方法来获取规则
valid()方法
检查表单或者某些元素是否有错误
$("#form").valid();返回值为布尔型;
validate方法返回Validator对象,Validator对象的方法如下:
1、Validator.form():验证表单是否有效,返回true/false;
2、Validator.element(element):验证某个元素是否有效,返回true/false;
如:validator.element("#username")
3、Validator.resetForm():把表单恢复到验证前原来的状态,会清除显示的验证错误信息
4、Validator.showErrors(errors):针对某个元素显示特定的错误信息
如:Validator.showErrors({username:"xxxxxx",passworld:"xxxxx"}),新的错误信息会立即显示
5、Validator.numberOfInvailds():返回无效(即没通过验证的)的元素数量
Validator对象的静态方法:
1、jQuery.validator.addMethod(name,method[,message]):增加自定义的验证方法
2、jQuery.validator.format(template,argument,argumentN...):格式化字符串,用参数代替模板中的{n}
如:var template=$.validator.format("{0}-{1}-{2}");
template("你","我","他")或template(["你","我","他"])则输出"你-我-他",参数个数不够则会输出{n}来代替
3、jQuery.validator.setDefaults(options):修改插件默认设置
如:$.validator.setDefaults({debug:true});表示给所有的表单都设置
4、jQuery.validator.addClassRules(name,rules):为某些class属性值包含name的元素增加组合(批量)验证规则
如:$.validator.addClassRules({text:{required:true,minlength:5}});表示给class="text"的元素添加验证规则
validate()方法配置项一:
--submitHandler:通过验证后运行的函数,可以加上表单的提交方法
submitHandler:function(form){
//提交表单或者其他的操作都可以,参数form是表单的document对象
form.submit();//提交表单,$(form).submit();//不能提交成功
}
--invalidHandler:无效表单提交后运行的函数
如:invalidHandler:function(event,validator){
//event:无效验证触发的事件
//validator:对象
}
也可以写事件来触发invalidHandler的event事件,如:
$("#form").on("invalid-form",function(event,validator){
})
--ignore:对某些元素不进行验证
--rules:定义校验规则
--messages:定义提示信息
groups:对一组元素的验证,用一个错误提示,用errorPlacement控制把错误信息放在哪里
rules中的校验方法都可以定义depends属性,表示当条件满足时返回true,则执行校验方法
针对参数为boolean类型的校验方法:
required:{
//只有depends:function(element)返回true,required校验方法才起作用
depends:function(element){
//:filled是Validation自带的选择器,匹配填写内容的元素
return $("#password").is(":filled")
}
}
针对参数为非boolean类型的校验方法如下:
maxlength:{
param:2
//只有depends:function(element)返回true,maxlength校验方法的值才设置为2
depends:function(element){
//:filled是Validation自带的选择器,匹配填写内容的元素
return $("#password").is(":filled")
}
}
}
groups的使用如下:
groups:{login:"username password confirm-password"} //对一组元素进行验证
errorPlacement:function(error,element){ //对一组元素验证后错误信息显示
error.insertBefore("#info");//将一组元素的错误信息都显示在id="info"的元素上
}
validate()方法配置项
onsubmit:是否在提交时验证,默认值为true
onfoucusout:是否在获取焦时验证
onkeyup:是否在敲击键盘时验证
onclick:是否在鼠标点击时验证,一般用于checkbox或者radio
focusInvalid:提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的 表单)是否会获得焦点
focusCleanup:当未通过验证的元素获得焦点时,是否移除错误提示
errorClass:指定错误提示的css类名,可以自定义错误提示的样式
validClass:指定验证通过的css类名
errorElement:使用什么标签标记错误
wrapper:使用什么标签把上边的errorElement包起来
errorLaberContainer:把错误信息统一放在一个容器里面
errorContainer:显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏。
validate()方法配置项之四:
1、showErrors:可以显示总共有多少个未通过验证的元素
如:showErrors:function(errorMap,errorList){
errorMap:元素信息和错误信息的键值对
errorList:元素信息、错误信息、验证方法等信息列表
this.defaultShowErrors();//使用默认的错误提示信息展示方式,需要这个否则错误信息不显示了
}
2、errorPlacement:自定义错误信息放在哪里,配合groups一起使用
3、success:要验证的元素通过验证后的动作
如:success:"right" 或 success:function(label){label.addClass("right")}
效果是给错误信息展示label元素的class属性值追加right值
4、highlight:可以给未通过验证的元素加效果
如:highlight:function(element,errorClass,validClass){
//element:绑定验证的元素
//errorClass:验证错误信息展示label的class属性值
//validClass:验证通过信息展示label的class属性值
}
5、unhighlight:去除未通过验证的元素的效果,一般和highlight同时使用,同上
注意:success主要针对label元素,highlight主要针对input元素
highlight和unhighlight主要用在单项验证时