easyui的验证框架,validatebox不能有效的支持多个条件的验证,比如中文用户名,既要验证其是中文,又要验证其长度不超过6位时便显得很繁琐,需要反复的为easyui添加验证规则。
在此实现一个多个条件验证的验证规则,使验证规则通过参数传入自定义的验证规则中。
- 首先为easyui添加两个验证规则,即验证中文,和长度的规则。
$.extend( $.fn.validatebox.defaults.rules,{ length : {//验证长度 validator : function(value, param) { var len = $.trim(value).length; $.fn.validatebox.defaults.rules.length.message = "输入内容长度必须介于"+param[0]+"和"+param[1]+"之间."; return len >= param[0] && len <= param[1]; }, message :"" }, chinese : {// 验证中文 validator : function(value) { return /^[\Α-\¥]+$/i.test(value); }, message : '请输入中文' } });
2.添加一个验证多条件的规则
group : {// param的值为[]中值,多条件的验证规则 validator : function(value, param) { var flag = false; var message = "验证不通过"; for(var i=0;i<param.length;i++){ var validatorone = param[i]; var validatename =validatorone; var validateParam =null; //取名称和参数 if(validatorone.indexOf('[')>0){ var start = validatorone.indexOf('[')+1; var end =validatorone.indexOf(']'); validateParam =validatorone.substring(start,end).split(','); validatename = validatorone.substring(0,validatorone.indexOf('[')); } flag = $.fn.validatebox.defaults.rules[validatename].validator(value,validateParam); message = $.fn.validatebox.defaults.rules[validatename].message; //验证 /*flag = eval("$.fn.validatebox.defaults.rules[validatename].validator(value,validateParam)"); message=eval("$.fn.validatebox.defaults.rules[validatename].message");*/ $.fn.validatebox.defaults.rules.group.message = message; if(!flag){ return flag; } } return true; }, message : '验证未通过' }
3.调用
<input name="name" class="easyui-validatebox" required="required" validtype="group['chinese','length[2,25]']" />
由于多条件验证的参数是通过字符串传递的,所以如果子验证中还需要使用引号时需要转义。