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

最新推荐文章于 2024-03-14 14:26:10 发布

原创最新推荐文章于 2024-03-14 14:26:10 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyui 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在EasyUI中实现表单的自定义验证，特别是正则表达式的应用。通过在validatebox API中添加自定义方法，可以实现动态参数的正则验证，例如密码长度检查。此外，还探讨了混合验证方式，包括动态正则、消息提示、异步后台交互，以及多组验证，如用户编码和机构编码的合法性和唯一性验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>