0%

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

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

最后更新于 2019年09月22日

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)即可。

以上就是自定义验证的方法了。

快递信息查询 ajax+api jq-ui 滑动验证
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao
  1. VPS234主机测评

    发表于:
    来自 Google Chrome 77 in windows 10

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

  2. repostone

    发表于:
    来自 Google Chrome 63 in windows 8.1

    非技术的路过。