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


Posted in Javascript onApril 12, 2017

方法一:

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

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

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

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

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

然后再添加

$.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实现多重规则验证的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
web 页面分页打印的实现
Jun 22 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 #Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 #Javascript
javascript数据结构之串的概念与用法分析
Apr 12 #Javascript
详解RequireJS按需加载样式文件
Apr 12 #Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 #Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
C语言编程练习
2012/04/02 面试题
班级活动策划书
2014/02/06 职场文书
项目建议书怎么写
2014/05/15 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014年防汛工作总结
2014/12/08 职场文书
党员转正意见怎么写
2015/06/03 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS