多语言展示
当前在线:1115今日阅读:6今日分享:31

Jquery-validate添加自定义校验和验证触发方式

我们在使用Jquery-validate插件验证表单时候,默认的提供的校验规则有限,不够用怎么办,可以自己添加自定义校验规则;默认的触发方式有时候也不符合业务需求,需要进行定制化配置修改,下面就来介绍下如何添加自定义校验规则和触发方式的修改
工具/原料
1

jquery

2

jquery-validate

3

网页浏览器

方法/步骤
1

jquery-validate插件如何下载和引入到项目中,这里不做详细介绍了。首先看下一个测试的页面验证效果        用户信息                       

   
        用户基本信息       

                               

       

                               

       

                               

       

                   

   
打开浏览器测试页面,然后点击提交按钮,可以看到表单右侧出现红色的错误提示信息

2

以上测试页面都是使用自带的默认校验规则提供的默认校验规则required:true 必须输入的字段。remote:'check.do' 使用ajax方法调用check.do验证输入值。email:true 必须输入正确格式的电子邮件。url:true 必须输入正确格式的网址。date:true 必须输入正确格式的日期dateISO:true 必须输入正确格式的日期(ISO),如:2017-09-17,2017/09/17。只验证格式,不验证有效性。number:true 必须输入合法的数字(负数,小数)。digits:true 必须输入整数。creditcard: 必须输入合法的信用卡号。equalTo:'#field' 输入值必须和 #field 相同。accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。range:[5,10] 输入值必须介于5和10之间。max:5 输入值不能大于5。min:10 输入值不能小于10。例如例子中姓名使用了required必填校验和minlength最小2个字符限制,年龄字段使用digits校验必须是整数,邮箱使用了email格式

3

如果我们想让姓名只能输入中文,默认的校验规则不符合要求,则需要添加自定义的校验规则。$.validator.addMethod('validateName', function(value, element) {  var v_regex=/^[\u4E00-\u9FA5]+(?:·[\u4E00-\u9FA5]+)*$/;  value=''+value;  if(value){    if(!v_regex.test(value)){      return false;    }else{      return true;    }  }else{    return null;  }}, '请正确填写您的姓名');自定义添加的验证规则建议添加到additional-methods.js文件中

4

在页面验证规则上添加validateName: trueusername: {   required: true,   minlength: 2,   validateName: true}添加之后,页面的用户名表单,如果不填写中文,验证就通过不了

6

在validate参数中如图的位置添加onkeyup:false可以关闭onkeyup触发验证其它的触发验证修改方式,和onkeyup方式一样,可以根据需要进行设置修改

注意事项

初学者,建议按照上面的步骤亲自试一遍,比看一遍要深刻的多

推荐信息