首页 > 编程 > JavaScript > 正文

easyui关于validatebox实现多重规则验证的方法(必看)

2019-11-19 16:51:04
字体:
来源:转载
供稿:网友

方法一:

自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如:

<input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">  

方法二:(不太好用,试了半天还是不显示第二个验证的消息)

对于1.5版本的easyui.min,注释掉以下代码:

然后再添加

$.extend($.fn.validatebox.defaults.rules, {       multiple : {         validator : function(value, vtypes) {           var returnFlag = true;           var opts = $.fn.validatebox.defaults;           for (var i = 0; i < vtypes.length; i++) {             var methodinfo = /([a-zA-Z_]+)(.*)/.exec(vtypes[i]);             var rule = opts.rules[methodinfo[1]];             if (value && rule) {               var parame = eval(methodinfo[2]);               if (!rule["validator"](value, parame)) {                 returnFlag = false;                 this.message = rule.message;                 break;               }             }           }           return returnFlag;         }       },       length : {         validator : function(value, param) {           this.message = 'Please enter a value between {0} and {1}.';           var len = $.trim(value).length;           if (param) {             for (var i = 0; i < param.length; i++) {               this.message = this.message.replace(new RegExp(                       "//{" + i + "//}", "g"), param[i]);             }           }           return len >= param[0] && len <= param[1];         },         message : 'Please enter a value between {0} and {1}.'       }     });

调用方法

<input class="easyui-validatebox" data-options="required:true,validType:'multiple[/'email/',/'length[0,20]/']'">  

方法三:(可以实现两种验证的消息)

$.extend($.fn.validatebox.defaults.rules, {   minLength : {     validator : function (value, param) {       var rules = $.fn.validatebox.defaults.rules;       rules.minLength.message = 'Please enter at least {0} characters.';       if(!rules.email.validator(value)){         rules.minLength.message = rules.email.message;         return false;       }       if(!rules.length.validator(value,param)){         rules.minLength.message = rules.length.message;         return false;       }       return value.length >= param[0];     },     message : ''   } });

根据方法三的试验:

$.extend($.fn.validatebox.defaults.rules, {    //再次输入密码效验(与上一次一样;密码介于6-16位)  checkpwd: {    validator: function (value, param) {      var rules = $.fn.validatebox.defaults.rules;      rules.checkpwd.message = 'Please enter at least {0} characters.';            if (!rules.passequals.validator(value,param)) {        rules.checkpwd.message = rules.passequals.message;        return false;      }      if (!rules.minlength.validator(value)) {        rules.checkpwd.message = rules.minlength.message;        return false;      }      return value.length >= param[0];    },    message: ''  },  passequals: {    validator: function (value, param) {      return value == $(param[0]).val();    },    message: '两次密码不一致.'  },    minlength: {    validator: function (value) {      var len = $.trim(value).length;      return len >=6 && len <= 16;    },    message: "输入内容长度必须介于6和16之间."  }});

调用:(注意pwd两边不能写引号)

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" /><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="validType:'checkpwd[pwd]'" />

附录: 可以参考的验证规则:

idcard: {// 验证身份证        validator: function (value) {          return /^/d{15}(/d{2}[A-Za-z0-9])?$/i.test(value);        },        message: '身份证号码格式不正确'      }, minLength: {        validator: function (value, param) {          return value.length >= param[0];        },        message: '请输入至少(2)个字符.'      }, length: { validator: function (value, param) {        var len = $.trim(value).length;        return len >= param[0] && len <= param[1];      },        message: "输入内容长度必须介于{0}和{1}之间."      }, phone: {// 验证电话号码        validator: function (value) {          return /^((/d{2,3})|(/d{3}/-))?(0/d{2,3}|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$/i.test(value);        },        message: '格式不正确,请使用下面格式:020-88888888'      },mobile: {// 验证手机号码        validator: function (value) {          return /^(13|15|18)/d{9}$/i.test(value);        },        message: '手机号码格式不正确'      },intOrFloat: {// 验证整数或小数        validator: function (value) {          return /^/d+(/./d+)?$/i.test(value);        },        message: '请输入数字,并确保格式正确'      },currency: {// 验证货币        validator: function (value) {          return /^/d+(/./d+)?$/i.test(value);        },        message: '货币格式不正确'      },qq: {// 验证QQ,从10000开始        validator: function (value) {          return /^[1-9]/d{4,9}$/i.test(value);        },        message: 'QQ号码格式不正确'      },integer: {// 验证整数 可正负数        validator: function (value) {          //return /^[+]?[1-9]+/d*$/i.test(value);          return /^([+]?[0-9])|([-]?[0-9])+/d*$/i.test(value);        },        message: '请输入整数'      }, age: {// 验证年龄        validator: function (value) {          return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);        },        message: '年龄必须是0到120之间的整数'      }, chinese: {// 验证中文        validator: function (value) {          return /^[/Α-/¥]+$/i.test(value);        },        message: '请输入中文'      },english: {// 验证英语        validator: function (value) {          return /^[A-Za-z]+$/i.test(value);        },        message: '请输入英文'      },unnormal: {// 验证是否包含空格和非法字符        validator: function (value) {          return /.+/i.test(value);        },        message: '输入值不能为空和包含其他非法字符'      }, username: {// 验证用户名        validator: function (value) {          return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);        },        message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'      },faxno: {// 验证传真        validator: function (value) {          //      return /^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/i.test(value);          return /^((/d{2,3})|(/d{3}/-))?(0/d{2,3}|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$/i.test(value);        },        message: '传真号码不正确'      }, zip: {// 验证邮政编码        validator: function (value) {          return /^[1-9]/d{5}$/i.test(value);        },        message: '邮政编码格式不正确'      },ip: {// 验证IP地址        validator: function (value) {          return /d+.d+.d+.d+/i.test(value);        },        message: 'IP地址格式不正确'      },name: {// 验证姓名,可以是中文或英文        validator: function (value) {          return /^[/Α-/¥]+$/i.test(value) | /^/w+[/w/s]+/w+$/i.test(value);        },        message: '请输入姓名'      },date: {// 验证姓名,可以是中文或英文        validator: function (value) {          //格式yyyy-MM-dd或yyyy-M-d          return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])/1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])/1(?:29|30)|(?:0?[13578]|1[02])/1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2/2(?:29))$/i.test(value);        },        message: '清输入合适的日期格式'      },msn: {        validator: function (value) {          return /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/.test(value);        },        message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'      },same: {        validator: function (value, param) {          if ($("#" + param[0]).val() != "" && value != "") {            return $("#" + param[0]).val() == value;          } else {            return true;          }        },        message: '两次输入的密码不一致!'      }

以上这篇easyui关于validatebox实现多重规则验证的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表