validate()的配置项
1、submitHandler //通过验证成功后运行的函数
代码:
$("#mainForm").validate({
......
rules:{
username:{//此处username表示name属性
//required:true,
required:{
depends:function(element)//element表示username
{
return $("#password").is(":filled");//filled是validate里的选择器
}
}
//minlength:12
minlength:{
param:12,
depends......
}
}
} ;
ignore:"#username",
submitHandler:function(form)
{
console.log($(form).serialize());//表单提交后,输出表单信息,此处将表单序列化先。
},
invalidHandler:function(event,validator)//event表示无效触发的事件,validator表示对象
{
console.log(“错误数”+validator.numberOfInvalids());
},
groups:{
login:"username password confirm-password"
},
errorPlacement:function(error,element){//elemnet表示错误元素
error.insertBefore("#info");//插入到$info元素前面
},
onsubmit:false,
errorContainer:“#info2”,//假设有<p id="info2">请仔细看填表要求</p>
errorLabelContainer:“#info”,
errorElement:"li",
wrapper:"ul",
showErrors:function(errorMap,errorList)
{
console.log(errorMap);
console.log(errorList);
this.defaultShowErrors();//默认显示错误信息//若注释掉,则系统不会显示默认错误信息
},
highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).remove(validClass);
$(element).fadeOut().fadeIn();
},
highlight:function(element,errorClass,validClass){
$(element).addClass(validClass).remove(errorClass);
}
});
invalidHandler//无效提交表单后运行的函数
也可以作为一个单独事件触发:
$("#mainForm").on("invalid-form", function(event,validator) //注意:此处名字前面一定要“invalid-form”,如果是djinvalid,则无效,当然后面可以添加自定义名字,“invalid-form.hjh”
{
console.log(“错误数”+validator.numberOfInvalids());
} );
ignore//对某些元素不进行校验,默认值是ignore:":hidden"
rules//定义校验规则 注意,每个rules都可以有一个depends,depends返回ture 或false,来决定该规则是否应用
messages//提示校验信息
groups//对一组元素的验证,用一个错误信息,用ErrorPlacement来把信息放在某个位置//就是把一堆错误信息放在一处显示
(2)onsubmit是否在提交时验证
onfocusout//是否在获取焦点时验证
onkeyup//是否在敲击键盘时验证
onclick是否在鼠标点击时验证,一般用于radiobutton,checkbox等
focusInvalid//无效表单验证不通过时,第一个或提交前获得焦点的元素是否获得焦点
focusCleanup//当通过验证的表单元素获得焦点时是否显示错误信息
(3)errorClass//指定错误提示的css类名//默认是error class
validClass指定验证通过的css类名//默认valid
errorElement使用什么表签标记错误//默认是label
wrapper使用什么元素把上面的errorElement包起来
errorLabelContainer把错误信息放在一个容器里
errorContainer可以设置隐藏或显示错误信息,有错误时,container显示,无时,隐藏
(4)showErrors//显示有多少个错误的验证元素
errorPlacement
success、、元素通过验证后的行为
success:"right"//直接给通过的元素错误显示label添加right css类//success是指针对label的,和下面的highlight不同,highlight是真对input的
success:function(label)
{
$(label).addClass("rrrrright");
}
highlight//给未通过验证的元素加效果
unhighlight//去除加的效果
(5)选择器扩展:
:blank所以值为空的元素
:filled
:unchecked