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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python字符串排序方法
2014/08/29 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python中列表的含义及用法
2020/05/26 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
大专护理专业自荐信
2015/03/25 职场文书
教师素质教育心得体会
2016/01/19 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏