• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

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

0
  • 本文分类:锋利的JQuery
  • 本文标签:validate
  • 流行热度:已超过 247 人围观了本文
  • 最后更新:2019年09月22日 - 17时10分02秒
  • 发布日期:2019年09月22日 - 17时10分02秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码