您的位置:首页 > Web前端 > JQuery

Jquery validate配置项

2016-03-14 21:28 495 查看
上一节学习了 一些常用的方法和静态方法现在我们学习下validate中的配置选项

submitHandler方法:用于在完成验证后调用的方法

//获取form表单元素对象使用validate方法
$("#formID").validate({
//加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试
//debug:true,
//rules要验证的元素包裹进rules中
rules:{
username:{required:true}
},
//提示信息
messages:{
username:{
required:"傻逼输入错了"
}
},
//sumitHandler 在我们所有的验证通过后调用的方法 传入验证的form对象
submitHandler :function(from){
alert("输入正确调用的方法");
}
});




我们在所有验证通过的时候打印了一个alert()函数

invalidHandler方法:用于在完成验证后调用的方法

$("#formID").validate({
//加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试
//debug:true,
//rules要验证的元素包裹进rules中
rules:{
username:{required:true}
},
//提示信息
messages:{
username:{
required:"傻逼输入错了"
}
},
//sumitHandler 在我们所有的验证通过后调用的方法
invalidHandler:function(event,validate){
alert("验证失败调用该方法错误数量为===="+validate.numberOfInvalids());
}

});
这里点击登录如果有验证没有通过就会调用invalidHandler方法  接受两个参数 事件对象和validate对象 下面是错误信息




ignore配置项

$(function(){
//获取form表单元素对象使用validate方法
$("#formID").validate({
//加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试
//debug:true,
//rules要验证的元素包裹进rules中
rules:{
username:{required:true}
},
//提示信息
messages:{
username:{
required:"傻逼输入错了"
}
},
//sumitHandler 在我们所有的验证通过后调用的方法

ignore:"#username" //指定对那些文本框不进行验证 默认值是:hedden 对隐藏的元素不进行验证

});


规则的depends属性

所有的验证规则都有depends属性用于 规定该验证什么时候有效下面我们来看一个例子

该属性对应一个function 该functionw返回true或则false

$("#formID").validate({
rules:{
username:{
required:{
//什么时候进行验证 当密码输入后进行验证 接一个参数element代表当前username元素对象
depends:function(element){
//判断密码框是否填写 如果填写返回true  :filled是一个判断是否填写的选择器
return $("#userpassword").is(":filled");
}
},
maxlength:{
parame:2//针对多个参数写法 大于两位触发验证
function(element){
//判断密码框是否填写 如果填写返回true  :filled是一个判断是否填写的选择器
return $("#userpassword").is(":filled");
}
},
userpassword:{required:true}
},
//提示信息
messages:{
username:{
required:"傻逼输入错了"
},
userpassword:{required:"密码不能为空"}
},
});


刚刚开始点击登录是不会对用户框进行验证的



但是如果我们填写好密码 那么再点击提交就会对用户名进行非空验证

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: