jquery.Validation 中文说明

最新推荐文章于 2021-04-07 20:29:19 发布

小博

最新推荐文章于 2021-04-07 20:29:19 发布

阅读量555

点赞数

分类专栏： jquery 文章标签： validation function wrapper url asp.net methods

jquery 专栏收录该内容

76 篇文章 0 订阅

订阅专栏

在做项目时，我们不仅要在服务器端进行一些验证，一般也在要客户端进行验证，这样才能以最快的时间将一些错误反馈给用户，让用户不必在点击了提交按钮后才得知自己录入错了一些东西。

说明：

提交表单，并进行验证，这时第一个示通过验证的表单元素会获得焦点。
当验证失败后，这时如果元素的值发生变化会自动进行验证，而不是像第一次一样需要提交表单来触发验证。

validation插件中的选择项:

debug:true不会提交表单
如果一个页面中有多个表单，可以在$.validator.setDefaults中设置用
$.validator.setDefaults({
debug: true
})
submitHandler:function 通过验证后运行的函数,里边要加上表单提交的函数，否则表单不会提交，对于在asp.net项目中应用了jquery.vilidation后导致按钮不起作用的问题可以看这篇文章
ignore: 忽略对某个元素的验证.
rules:自定义规则,key:value的形式，key是要验证的元素,value可以是字符串或对象，后边会有几个例子说明
message:自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数，后边有几个例子说明
groups:对一组元素的验证，用一个错误提示.
onsubmit: false意思是说不进行验证了？用其它方式进行验证
onfocusout: false意思是说，在未标记为未通过验证之前,不出现提示
加不加这样的区别[在未标记为未通过验证之前]：
不加时，当你在一个元素有输入，但不合法时，这个元素blur时会有提示出现
加了后: 不会出现提示
onkeyup作用不大
onclick,与checkbox,radiobox验证有关
focusInvalid: false
前边说过，提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
这个选择加了以后，没有元素会获得焦点
focusCleanup: true
当未通过验证的元素获得焦点时，移除错误提示
errorClass:指定错误提示的css类名，可以自定义错误提示的样式
errorElement: "em"用什么标签标记错误，默认是label
wrapper: 用什么标签再把上边的errorELement包起来
errorLabelContainer:把错误放到期里指定的元素里
errorContainer:用处不大
showErrors:跟一个函数，可以显示总共有多少个未通过验证的元素
errorPlacement:跟一个函数，可以自定义错误放到哪里
success:要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
highlight:可以给未通过验证的元素加效果，闪烁等

validation插件方法

validate 上边说的选项就是为它服务的
valid 作用不大，就是都通过验证结果为true
rules( ) 返回指定元素的验证规则，返回一个对象
rules("add",rules)添加规则,例
$("#username").rules("add",{
required:true
})
这个比较有用，如果一个表单在不同的地方需要不同的验证方法，可以用这临时加上验证规则
rules( "remove",rules)移除验证规则，只能移除在validdate中加的或通过add加的，就是说
不能移除在元素中直接写的，如class="required"
removeAttrs:移除属性，前边的rules("remove":rules),不能移除在元素里直接写的class="required"
这个方法不是用来完成这点的

validation插件中自定义的选择符

:blank 表单中所有空白值的元素
:filled 有值的元素
:unchecked 与jquery中的:checked相反

validation插件中提供的一个实用方法

jQuery.format(tempalte,arg1,arg2...)
用后边的arg1 arg2等代替template中的{0},{1}等
addMethod( name, method, message)
参数name是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value是元素的值，element是元素本身 param是参数，我们可以用addMethod来添加除built-in Validation methods之外的验证方法比如有一个字段，只能输一个字母，范围是a-f,写法如下
$.validator.addMethod("af",function(value,element,params){
   if(value.length>1){
    return false;
   }
   if(value>=params[0] && value<=params[1]){
    return true;
   }else{
    return false;
   }
},"必须是一个字母，且a-f");
用的时候，比如有个表单字段的id="username"，则在rules中写
username:{
   af:["a","f"]
}
addMethod的第一个参数，就是添加的验证方法的名子，这时是af
addMethod的第三个参数，就是自定义的错误提示,这里的提示为："必须是一个字母，且a-f"
addMethod的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法
如果只有一个参数，直接写，如果af:"a",那么a就是这个唯一的参数，如果多个参数，用在[]里，用逗号分开

validation插件的内置验证方式

规则说明:required:true 必填

minlength:最小长度

maxlength:最大长度

rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串

range:[100,1000] 只能是100和 1000 之间的值”

min:最小值

max:最大值

email:true 验证邮箱

url:true 验证是否是合法的网址

date:true 验证是否是合法的日期 new Date() 类型格式

dateISO:true 验证是否是合法的日期年/月/日或年-月-日格式

number:true 验证是否是合法的数字

digits:true 验证是否为整数

creditcard: 验证合法的信用卡号

equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同

accept: “gif|png|jpg” 验证是否是合法后缀名的字符串

remote:’url’ 远程验证输入的值是否合法 url是返回true验证成功,false验证失败

remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}

errorPlacement:function(error, element){
if(element.attr("name") == "checkbox[]"){
error.appendTo("#checkwrong");//指定一个你想放的位置
}else{
error.insertAfter(element)
}
}