更新于

JQ插件-validate 自定义验证方法

发布于 / 分类: 锋利的JQuery / 已有 2 条评论 / 阅读量: 82

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
    repostone

    来自 Windows8.1-Chrome 的网友发布于 358 天前

    非技术的路过。

    VPS234主机测评
    VPS234主机测评

    来自 Windows10-Chrome 的网友发布于 361 天前

    jQuery火了这么多年了,现在vue、react各种框架:weixiao:

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局