easyui 表单自定义验证 正则表达式验证

1、在easyui的API中关于validatebox(验证框)的使用介绍里面,对自定义验证的方式给出了提示:

如果我们想添加自定义验证方法,可以直接写在equals结构后面,代码如下:

$.extend($.fn.validatebox.defaults.rules, {
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: 'Field do not match.'   
    },  
    onlyNum:{
        validator:function(value,param){
            var reg = /^\d+$/g;
            return reg.test(value);
        },
        message:  '只能输入数字!'
    }
});



调用方式:<input name="number" type="text" class="easyui-validatebox" required="required" validType="onlyNum" />

2、正则表达式需要动态的传递参数,同时提示信息需要动态添加参数,比如:密码长度验证

$.extend($.fn.validatebox.defaults.rules, {
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: 'Field do not match.'   
    },  
    pwdLength: {
        validator: function(value, param){
        //正则表达式需要动态传递参数,必须采用正则对象即构造器方式,传入拼接了动态参数的字符串的方式
            var re =new RegExp("^[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$","g");
            return re.test(value);
        },    
    //提示信息中也需要动态添加参数,此时获取param中的参数方式为{0}、{1},分别代表param[0],param[1]
        message: "密码长度要求为{0}-{1}位字母或数字!"  
    }
});

调用方式:<input class="easyui-textbox" type="password" name="userPassword" data-options="validType:'pwdLength[6,12]',required:true"></input>

3、混合验证:动态提供正则表达式,动态设置message提示信息,可动态提供URL与后台异步交互,多组验证,比如:验证用户编码的合法性与唯一性,同时也可验证机构编码的合法性和唯一性

$.extend($.fn.validatebox.defaults.rules, {
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: 'Field do not match.'   
    },  
    // 混合验证,五个参数:第一个是正则表达式,第二个是错误提示信息,前两个参数用户合法性验证;第三个是调用的url,第四个是传递给服务器的参数名(参数key),第五个是错误提示信息,第六个参数是当前表单id字段
    complexValid : {
       validator: function(value, param) {  
           var m_reg = new RegExp(param[0]); 
           if (!m_reg.test(value)) {  
               $.fn.validatebox.defaults.rules.complexValid.message = param[1];//动态设置message提示信息,complexValid与方法名对应
               return false;  
           }  
           else {  
               var postdata = {};  
               postdata[param[3]] = value;  //动态的key和value对应
               postdata['id'] = $("#"+param[5]).val();//获取id值
               var result = $.ajax({  
                   url: param[2],  //动态URL
                   data: postdata,
                   async:false,
                   type: "post"  
               }).responseText;
               if (result == "false") {
                   $.fn.validatebox.defaults.rules.complexValid.message = param[4];  //动态设置message提示信息,complexValid与方法名对应
                   return false;  
               }  
               else {  
                   return true;  
               }  
           }  
       }, 
    message : "" 
    }
});


调用方式:
<input type="hidden" id="userId" name="id"></input> <input class="easyui-textbox" type="text" name="userCode" validType="complexValid['^[0-9a-zA-Z]+$','编码只能包含字母、数字','/userCode/ajax','userCode','用户编码已被占用,换一个试试!','userId']"></input>

你可能感兴趣的:(easyui)