自定义easy-ui validatebox 如maxLength()等等校验规则

最新推荐文章于 2024-10-31 17:07:24 发布

转载最新推荐文章于 2024-10-31 17:07:24 发布 · 1.1k 阅读

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过扩展EasyUI的验证插件来实现多种自定义的验证规则，包括长度限制、格式检查及数据唯一性验证等，并提供具体示例。

感谢有奉献精神的人

转自：http://blog.youkuaiyun.com/bareheadzzq/article/details/8050003

[javascript]view plaincopy 
   
 $(document).ready(  
         function(){  
               
             $.extend($.fn.validatebox.defaults.rules, {     
                 minLength: {     
                     validator: function(value, param){   //value 为需要校验的输入框的值 , param为使用此规则时存入的参数  
                         return value.length >= param[0];     
                     },     
                     message: '请输入最小{0}位字符.'    
                 }     
             });   
               
             $.extend($.fn.validatebox.defaults.rules, {     
                 maxLength: {     
                     validator: function(value, param){     
                         return param[0] >= value.length;     
                     },     
                     message: '请输入最大{0}位字符.'    
                 }     
             });   
               
             $.extend($.fn.validatebox.defaults.rules, {     
                 length: {     
                     validator: function(value, param){     
                         return value.length >= param[0] && param[1] >= value.length;     
                     },     
                     message: '请输入{0}-{1}位字符.'    
                 }     
             });   
   
         // extend the 'equals' rule     
             $.extend($.fn.validatebox.defaults.rules, {     
                 equals: {     
                     validator: function(value,param){     
                         return value == $(param[0]).val();     
                     },     
                     message: '字段不相同.'    
                 }     
             });    
               
             $.extend($.fn.validatebox.defaults.rules, {     
                 web : {     
                     validator: function(value){     
                         return /^(http[s]{0,1}|ftp):\/\//i.test($.trim(value));     
                     },     
                     message: '网址格式错误.'    
                 }     
             });   
                           
            $.extend($.fn.validatebox.defaults.rules, {     
                mobile : {     
                     validator: function(value){     
                         return /^1[0-9]{10}$/i.test($.trim(value));     
                     },     
                     message: '手机号码格式错误.'    
                 }     
             });  
              
            $.extend($.fn.validatebox.defaults.rules, {     
                date : {     
                     validator: function(value){     
                         return /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/i.test($.trim(value));     
                     },     
                     message: '曰期格式错误,如2012-09-11.'    
                 }     
             });   
              
            $.extend($.fn.validatebox.defaults.rules, {     
                email : {     
                     validator: function(value){     
                         return /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/i.test($.trim(value));     
                     },     
                     message: '电子邮箱格式错误.'    
                 }     
             });   
              
            $.extend($.fn.validatebox.defaults.rules, {     
                captcha : {     
                     validator: function(value){     
                         var data0 = false;  
                         $.ajax({  
                             type: "POST",async:false,  
                             url:contextPath + "/json/valSimulation.action",  
                             dataType:"json",  
                             data:{"simulation":value},  
                             async:false,  
                             success: function(data){  
                                 data0=data;  
                             }  
                         });  
                           
                        return data0;  
 //                      return /^[a-zA-Z0-9]{4}$/i.test($.trim(value));  
                     },     
                     message: '验证码错误.'    
                 }     
             });   
              
            $.extend($.fn.validatebox.defaults.rules, {     
                txtName : {     
                     validator: function(value,param){     
                         var data0 = false;  
                         if(value.length >= param[0] && param[1] >= value.length)  
                         {  
                             $.ajax({  
                                 type: "POST",async:false,  
                                 url:contextPath + "/json/valName.action",  
                                 dataType:"json",  
                                 data:{"txtName":value},  
                                 async:false,  
                                 success: function(data){  
                                     data0=!data;  
                                 }  
                             });  
                         }else{  
                             param[2] = "请输入"+param[0]+"-"+param[1]+"位字符.";  
                             return false;  
                         }  
                           
                         param[2] = "用户名称已存在.";  
                        return data0;  
                     },     
                     message: "{2}"   
                 }     
             });   
              
     });    

使用：
<input type="text" class="easyui-validatebox" required=true missingMessage="必须输入" data-options="validType:'maxLength[100]'" invalidMessage="最大长度不能超过100"/>
小细节:Unicode编码的汉字是3个字节。
Oracle 数据库字段指定为varchar2(). 还可以指定其单位为char 还是byte
为char :
varchar2(3) 可以存 3*2/3= 2个汉字

为byte:varchar2(3)可以存3*1/3=1个汉字

下面来自 http://www.cnblogs.com/yukaizhao/archive/2012/06/16/jquery-easyui-validation-equalto.html

 
         /**
        
         * @author yukaizhao
        
         */
        
         $.extend($.fn.validatebox.defaults.rules, {  
        
         /*必须和某个字段相等*/
        
         equalTo: {
        
         validator:
         function
         (value,param){
        
         return 
         $(param[0]).val() == value;
        
         },
        
         message:
         '字段不匹配'
        
         }
        
         });

使用示例：

 
    
         密码： <input id=
         "password" 
         name=
         "password" 
         validType=
         "length[4,32]" 
         class
         =
         "easyui-validatebox" 
         required=
         "true" 
         type=
         "password" 
         value=
         ""
         />
        
 
         <br/>
        
 
         确认密码：<input type=
         "password" 
         name=
         "repassword" 
         id=
         "repassword" 
         required=
         "true" 
         class
         =
         "easyui-validatebox"  
         validType=
         "equalTo['#password']" 
         invalidMessage=
         "两次输入密码不匹配"
         />
        

         
 
        
 
  