JQ插件-validate 自定义验证方法
validate默认有几种验证方式,但是定死的方法肯定不能得到发展的,作为老牌的jq插件,他支持自定义验证方法。
首先我们需要引入他自己的模块,additional-methods.js文件,也就是说在引入jquery.validate.js插件之后,还需要引入这个additional-methods.js文件。
注:如果还需要使用中文的message信息提示,还需要在additional-methods.js后面再引入对应的语言,如:messages_zh.js,这个就是中文的提示信息。
因为如果你自定义的一个验证方法,而messages_zh.js先引入了,你这这个文件里面写的对应方法的信息提示就会报错,该方法不存在。
不多说,直接看看怎么自定义
自定义验证方法
我们需要在additional-methods.js文件里面写。
$.validator.addMethod(name,function(value,element,param){},messages)
有三个参数:
name : 也就是你自定义验证方法的名字,比如validate自己的url,email,这种
messgaes : 当验证不通过提供的error文字提示,直接文本即可
function : 用于判断的方法
function 自己也有三个参数,分别为:value,element,param
value : 表单元素里面的value内容
element : 被验证的表单元素本身,dom元素
param : 要求验证时传入的参数
param ??
这里前两个很好理解,但是param是什么东西,他怎么被传入呢?这里我们来看一下调用验证时使用的方法
$('#commentForm').validate({
rules : {
username : {
required : true,
minlength :6
}
}
});
这里表示对commentForm元素的表单元素name为username进行验证,要求为必填和最小字符6位及以上
假设我们设置了一个这样的方法:
$.validator.addMethod('xixi',function(value,element,param){},'我正在测试哦,你没有通过')
调用:
$('#commentForm').validate({
rules : {
username : {
required : true,
minlength :6,
xixi : [5,10]
}
}
});
我们在调用的键值对的value上写了[5,10]这样一个数组,那么这个数组就是param参数了,你也可以传布尔值。
假设我要让他这个文字在5字符以上,10字符以下
$.validator.addMethod('xixi',function(value,element,param){
var flag = false;
if(value.length <= param[1] && value.length >= param[0]) {
flag = true;
}
return this.optional(element) || flag;
},'我正在测试哦,你没有通过')
这里我们让flag赋值true/false来判断当前是否达到要求,但是我们还使用了this.optional(element)这个语句,这个又是什么意思呢?
this.optional(element) ???
这个语句的作用是:
当你没有填写的内容的时候就不进行验证判断,当他判断到你的表单元素里面没有内容,就会返回‘dependencg-mismatch’表示没有匹配到内容,加上布尔或语义,当有一个条件时true是后面的就不做判断,此时dependencg-mismatch是一个string,有值即true,于是return true,表单验证过了。
当你有填写内容的时候,this.optional(element)返回false,然后布尔或就会判断后一个flag,如果flag是true,那就return true,如果为false,那就return false。
如果你想不管有没有值都要进行判断,可以删去这个this.optional(element)即可。
以上就是自定义验证的方法了。
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
全部评论 2
repostone
Google Chrome Windows 8.1VPS234主机测评
Google Chrome Windows 10