首页 > 代码库 > validatebox实现多重规则验证
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]‘]">
validatebox实现多重规则验证
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。