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]']">
