jQueryEasyUi验证-优快云博客

本文详细介绍了如何使用多重验证技术确保数据的有效性和一致性，包括内置验证和自定义验证规则的应用实例。通过实例展示了如何实现邮箱、网址、长度、手机、邮编、账号和汉子等不同类型的数据验证，并提供了自定义验证扩展的实现方法。

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

多重验证：

{  
                    field : 'startPort',  
                    title : "起始端口",  
                    editor: "text",  
                    width : 50,  
                    editor: {  
                        type: 'SuperValidatebox',  
                        options: {  
                            required: true,  
                            validType: ['integer','length[0,5]']  
                        }  
                    },  
                      
                      
自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：  
input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">

html

 
   <html xmlns="http://www.w3.org/1999/xhtml">   
   <head>   
       <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>   
       <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>   
       <!--自定义验证-->   
       <script src="easyui1.2.4/validator.js" type="text/javascript"></script>   
       <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />   
       <script>   
      
           $(function () {   
                  
               //设置text需要验证   
               $('input[type=text]').validatebox();   
           })   
          
       </script>   
   </head>   
   <body>   
       邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />   
       网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />   
       长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />   
       手机验证：<input type="text" validtype="mobile"  /><br />   
       邮编验证：<input type="text" validtype="zipcode" /><br />   
       账号验证：<input type="text" validtype="account[8,20]" /><br />   
       汉子验证：<input type="text" validtype="CHS" /><br />   
       远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>   
   </body>   
   </html>   
  

-----

自定义验证：

//扩展easyui表单的验证  
$.extend($.fn.validatebox.defaults.rules, {  
    //验证汉子  
    CHS: {  
        validator: function (value) {  
            return /^[\u0391-\uFFE5]+$/.test(value);  
        },  
        message: '只能输入汉字'  
    },  
    //移动手机号码验证  
    mobile: {//value值为文本框中的值  
        validator: function (value) {  
            var reg = /^1[3|4|5|8|9]\d{9}$/;  
            return reg.test(value);  
        },  
        message: '输入手机号码格式不准确.'  
    },  
    //国内邮编验证  
    zipcode: {  
        validator: function (value) {  
            var reg = /^[1-9]\d{5}$/;  
            return reg.test(value);  
        },  
        message: '邮编必须是非0开始的6位数字.'  
    },  
    //用户账号验证(只能包括 _ 数字 字母)   
    account: {//param的值为[]中值  
        validator: function (value, param) {  
            if (value.length < param[0] || value.length > param[1]) {  
                $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';  
                return false;  
            } else {  
                if (!/^[\w]+$/.test(value)) {  
                    $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';  
                    return false;  
                } else {  
                    return true;  
                }  
            }  
        }, message: ''  
    }  
})

js代码

 
   $.extend($.fn.validatebox.defaults.rules, {            
           checkWSDL: {      
               validator: function(value,param){                
                    var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";   
                    return reg.test(value);   
               },      
               message: '请输入合法的WSDL地址'      
           },   
           checkIp : {// 验证IP地址   
               validator : function(value) {   
                   var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;   
                   return reg.test(value);   
               },   
               message : 'IP地址格式不正确'   
       }   
   });    
  