现在的位置: 首页 > easyui > Form > validatebox > 正文
扩展:validatebox实现多重规则验证
2012年11月06日 validatebox ⁄ 共 2710字 评论数 10 ⁄ 被围观 18,460 views+
文章目录
[隐藏]

在QQ群里面有位老兄(荒谬的旧伤口)分享了一种实现validatebox多重验证的方法,作为Easyui的校验插件没有实现多重校验能力是一种缺憾。比如说,既要限制格式为email,同时要求最长长度为20,我们就要扩展一种规则,而对长度的要求很容易变化,如果变成要求30,我们又得扩张一种规则,所以对于多重验证的需求很必要。

实现思路较为简单,扩展一种新规则:multiple,入参为其它规则,然后遍历每个规则,遇到校验不通过的时候就返回失败,并且返回对应的提示消息。思路比较简单,不过正则表达式技巧的使用还是很漂亮的,个人岁暂时不动正则,不过觉得它很优美,所以我很快就会懂的,哈哈。直接上代码了。

实现代码:

$.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;
        }
    }
});

经过以上的扩展,多重校验算是实现了,但是验证不通过时的提示信息却出现了问题,当第二个验证器验证失败的时候,提示信息会将第一个验证器的提示信息参杂进来。究其原因是validatebox内部提示信息的实现逻辑不合理,在调用验证器的validator函数之后,又对验证器的message属性做包装。

个人觉得提示信息应该完全在验证器内部实现,在外部再做包装是完全不合理的。其实这种情况目前主要就是为了处理length类型的验证器的提示信息,所以解决方案也比较明确和唯一:

  • 修改源码,取消调用验证器之后再进一步对验证器的message属性做封装
  • 覆写需要包装提示信息的验证器,验证器内部实现对提示信息的包装,目前只有length验证器

对于1.3.1版本,大概在5060行,注释掉以下代码:

//if(_396){
//for(var i=0;i<_396.length;i++){
//_397=_397.replace(new RegExp("\\{"+i+"\\}","g"),_396[i]);
//}
//}

覆写length类型验证器:

$.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]\']'">

更新日志:

2012-12-11

夏悸的一篇博文中提到了另一种解决方案,大家也可以参考一下:

$.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 : ''
	}
});
2013-01-06

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

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

目前有 10 条留言 其中:访客:6 条, 博主:4 条

  1. peislin : 2012年11月27日10:34:52  -49楼 @回复 回复

    直接修改源码不好吧?


    • 管理员
      世纪之光 : 2012年11月27日13:52:51  地下1层 @回复 回复

      如果不改源码能解决的话,谁会愿意去改源码呢,不得已而为之。

  2. peislin : 2012年11月30日18:44:01  -48楼 @回复 回复

    1.2.2的validateBox是不是不支持data-options属性?


    • 管理员
      世纪之光 : 2012年11月30日19:57:51  地下1层 @回复 回复

      data-options属性是3.0版本开始才有的属性,之前所有的版本所有控件都没有这个属性。

  3. peislin : 2012年11月30日19:02:01  -47楼 @回复 回复

    还真是的,改成

    这样就可以了!

  4. tnst : 2013年01月05日20:00:09  -46楼 @回复 回复

    在同一个form表单中有两个以上的length验证

    提示信息会一直提醒“Please enter a value between 2 and 20.”


    • 管理员
      世纪之光 : 2013年01月06日00:27:09  地下1层 @回复 回复

      谢谢提醒,已经纠正这个错误,欢迎再次测试。

  5. SigeHo : 2013年08月15日15:14:47  -45楼 @回复 回复

    新版本的easyui的确有多重校验,可是有一个问题,就是这个多重验证是不能够使用自己扩展的验证,只能使用easyui默认的验证,好像是因为data-options里面不能使用自己扩展的东西


    • 管理员
      世纪之光 : 2013年08月15日17:39:01  地下1层 @回复 回复

      肯定支持的,如果无效的话,检查一下是不是你扩展的代码后于多重严重规则校验之后运行了,典型的代码执行顺序问题。

  6. 1 : 2014年03月10日15:23:31  -44楼 @回复 回复

    😥 留言是种美德,写点什么…

给我留言

留言无头像?


×