easyui的验证

  1. 多重验证：

    Js代码  收藏代码
    1.  {  
    2.                     field : 'startPort',  
    3.                     title : "起始端口",  
    4.                     editor: "text",  
    5.                     width : 50,  
    6.                     editor: {  
    7.                         type: 'SuperValidatebox',  
    8.                         options: {  
    9.                             required: true,  
    10.                             validType: ['integer','length[0,5]']  
    11.                         }  
    12.                     },  
    13.                       
    14.                       
    15. 自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：  
    16. input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">                      

     

     

    Java代码  收藏代码
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3.     <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>  
    4.     <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
    5.     <!--自定义验证-->  
    6.     <script src="easyui1.2.4/validator.js" type="text/javascript"></script>  
    7.     <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
    8.     <script>  
    9.   
    10.         $(function () {  
    11.               
    12.             //设置text需要验证  
    13.             $('input[type=text]').validatebox();  
    14.         })  
    15.       
    16.     </script>  
    17. </head>  
    18. <body>  
    19.     邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />  
    20.     网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />  
    21.     长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />  
    22.     手机验证：<input type="text" validtype="mobile"  /><br />  
    23.     邮编验证：<input type="text" validtype="zipcode" /><br />  
    24.     账号验证：<input type="text" validtype="account[8,20]" /><br />  
    25.     汉子验证：<input type="text" validtype="CHS" /><br />  
    26.     远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>  
    27. </body>  
    28. </html>  

     

    自定义验证：

    Java代码  收藏代码
    1. //扩展easyui表单的验证  
    2. $.extend($.fn.validatebox.defaults.rules, {  
    3.     //验证汉子  
    4.     CHS: {  
    5.         validator: function (value) {  
    6.             return /^[\u0391-\uFFE5]+$/.test(value);  
    7.         },  
    8.         message: '只能输入汉字'  
    9.     },  
    10.     //移动手机号码验证  
    11.     mobile: {//value值为文本框中的值  
    12.         validator: function (value) {  
    13.             var reg = /^1[3|4|5|8|9]\d{9}$/;  
    14.             return reg.test(value);  
    15.         },  
    16.         message: '输入手机号码格式不准确.'  
    17.     },  
    18.     //国内邮编验证  
    19.     zipcode: {  
    20.         validator: function (value) {  
    21.             var reg = /^[1-9]\d{5}$/;  
    22.             return reg.test(value);  
    23.         },  
    24.         message: '邮编必须是非0开始的6位数字.'  
    25.     },  
    26.     //用户账号验证(只能包括 _ 数字 字母)   
    27.     account: {//param的值为[]中值  
    28.         validator: function (value, param) {  
    29.             if (value.length < param[0] || value.length > param[1]) {  
    30.                 $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';  
    31.                 return false;  
    32.             } else {  
    33.                 if (!/^[\w]+$/.test(value)) {  
    34.                     $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';  
    35.                     return false;  
    36.                 } else {  
    37.                     return true;  
    38.                 }  
    39.             }  
    40.         }, message: ''  
    41.     }  
    42. })  
    Js代码  收藏代码
    1. $.extend($.fn.validatebox.defaults.rules, {           
    2.         checkWSDL: {     
    3.             validator: function(value,param){               
    4.                  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$";  
    5.                  return reg.test(value);  
    6.             },     
    7.             message: '请输入合法的WSDL地址'     
    8.         },  
    9.         checkIp : {// 验证IP地址  
    10.             validator : function(value) {  
    11.                 var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;  
    12.                 return reg.test(value);  
    13.             },  
    14.             message : 'IP地址格式不正确'  
    15.     }  
    16. });   

      

    =================================

    Java代码  收藏代码
    1. $.extend($.fn.validatebox.defaults.rules, {   
    2.     selectValueRequired: {   
    3.         validator: function(value,param){             
    4.              if (value == "" || value.indexOf('请选择') >= 0) {   
    5.                 return false;  
    6.              }else {  
    7.                 return true;  
    8.              }    
    9.         },   
    10.         message: '该下拉框为必选项'   
    11.     }   
    12. });   

     

    Java代码  收藏代码
    1. <select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select>  

     

     

    ===================================

    Remote：远程验证

    Easyui validatebox修改
    http://blog.csdn.net/qlh2863/article/details/7269689
    http://www.cnblogs.com/qiancheng509/archive/2012/11/23/2783700.html
    http://blog.csdn.net/dyllove98/article/details/8866711

     

    自己代码：

    Java代码  收藏代码
    1. equalTo : {  
    2.             validator : function(value, param) {  
    3.                 return $("#" + param[0]).val() == value;  
    4.             },  
    5.             message : '两次输入的密码不一致!'  
    6.         },  
    7.         checkPassword :{  
    8.             validator : function(value,param){  
    9.                 var sysUser = {};  
    10.                 var flag ;  
    11.                 sysUser.userPassword = value;  
    12.                 $.ajax({  
    13.                     url : root + 'login/checkPwd.do',  
    14.                     type : 'POST',                    
    15.                     timeout : 60000,  
    16.                     data:sysUser,  
    17.                     async: false,    
    18.                     success : function(data, textStatus, jqXHR) {     
    19.                         if (data == "0") {  
    20.                             flag = true;      
    21.                         }else{  
    22.                             flag = false;  
    23.                         }  
    24.                     }  
    25.                 });  
    26.                 if(flag){  
    27.                     $("#userPassword").removeClass('validatebox-invalid');  
    28.                 }  
    29.                 return flag;  
    30.             },  
    31.             message: '原始密码输入错误！'  
    32.         }  

     

    Java代码  收藏代码
    1. <table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;">  
    2.     <tr>  
    3.         <td>请输入原密码：</td>  
    4.         <td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"  
    5.             data-options="required:true" validType="checkPassword"/>  
    6.         </td>  
    7.     </tr>  
    8.     <tr>  
    9.         <td>请输入新密码：</td>  
    10.         <td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"  
    11.             data-options="required:true" />  
    12.         </td>  
    13.     </tr>  
    14.     <tr>  
    15.         <td>请确认输入新密码：</td>  
    16.         <td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"  
    17.             class="easyui-validatebox" data-options="required:true"  validType="equalTo['newPassword']" />  
    18.         </td>  
    19.     </tr>  
    20. </table>  

     

    ====================================================================================

     

    Js代码  收藏代码
    1. /** 
    2.  * 扩展easyui的validator插件rules，支持更多类型验证 
    3.  */  
    4. $.extend($.fn.validatebox.defaults.rules, {  
    5.             minLength : { // 判断最小长度  
    6.                 validator : function(value, param) {  
    7.                     return value.length >= param[0];  
    8.                 },  
    9.                 message : '最少输入 {0} 个字符'  
    10.             },  
    11.             length : { // 长度  
    12.                 validator : function(value, param) {  
    13.                     var len = $.trim(value).length;  
    14.                     return len >= param[0] && len <= param[1];  
    15.                 },  
    16.                 message : "输入内容长度必须介于{0}和{1}之间"  
    17.             },  
    18.             phone : {// 验证电话号码  
    19.                 validator : function(value) {  
    20.                     return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);  
    21.                 },  
    22.                 message : '格式不正确,请使用下面格式:020-88888888'  
    23.             },  
    24.             mobile : {// 验证手机号码  
    25.                 validator : function(value) {  
    26.                     return /^(13|15|18)\d{9}$/i.test(value);  
    27.                 },  
    28.                 message : '手机号码格式不正确'  
    29.             },  
    30.             phoneAndMobile : {// 电话号码或手机号码  
    31.                 validator : function(value) {  
    32.                     return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value);  
    33.                 },  
    34.                 message : '电话号码或手机号码格式不正确'  
    35.             },  
    36.             idcard : {// 验证身份证  
    37.                 validator : function(value) {  
    38.                     return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);  
    39.                 },  
    40.                 message : '身份证号码格式不正确'  
    41.             },  
    42.             intOrFloat : {// 验证整数或小数  
    43.                 validator : function(value) {  
    44.                     return /^\d+(\.\d+)?$/i.test(value);  
    45.                 },  
    46.                 message : '请输入数字，并确保格式正确'  
    47.             },  
    48.             currency : {// 验证货币  
    49.                 validator : function(value) {  
    50.                     return /^\d+(\.\d+)?$/i.test(value);  
    51.                 },  
    52.                 message : '货币格式不正确'  
    53.             },  
    54.             qq : {// 验证QQ,从10000开始  
    55.                 validator : function(value) {  
    56.                     return /^[1-9]\d{4,9}$/i.test(value);  
    57.                 },  
    58.                 message : 'QQ号码格式不正确'  
    59.             },  
    60.             integer : {// 验证整数  
    61.                 validator : function(value) {  
    62.                     return /^[+]?[1-9]+\d*$/i.test(value);  
    63.                 },  
    64.                 message : '请输入整数'  
    65.             },  
    66.             chinese : {// 验证中文  
    67.                 validator : function(value) {  
    68.                     return /^[\u0391-\uFFE5]+$/i.test(value);  
    69.                 },  
    70.                 message : '请输入中文'  
    71.             },  
    72.             chineseAndLength : {// 验证中文及长度  
    73.                 validator : function(value) {  
    74.                     var len = $.trim(value).length;  
    75.                     if (len >= param[0] && len <= param[1]) {  
    76.                         return /^[\u0391-\uFFE5]+$/i.test(value);  
    77.                     }  
    78.                 },  
    79.                 message : '请输入中文'  
    80.             },  
    81.             english : {// 验证英语  
    82.                 validator : function(value) {  
    83.                     return /^[A-Za-z]+$/i.test(value);  
    84.                 },  
    85.                 message : '请输入英文'  
    86.             },  
    87.             englishAndLength : {// 验证英语及长度  
    88.                 validator : function(value, param) {  
    89.                     var len = $.trim(value).length;  
    90.                     if (len >= param[0] && len <= param[1]) {  
    91.                         return /^[A-Za-z]+$/i.test(value);  
    92.                     }  
    93.                 },  
    94.                 message : '请输入英文'  
    95.             },  
    96.             englishUpperCase : {// 验证英语大写  
    97.                 validator : function(value) {  
    98.                     return /^[A-Z]+$/.test(value);  
    99.                 },  
    100.                 message : '请输入大写英文'  
    101.             },  
    102.             unnormal : {// 验证是否包含空格和非法字符  
    103.                 validator : function(value) {  
    104.                     return /.+/i.test(value);  
    105.                 },  
    106.                 message : '输入值不能为空和包含其他非法字符'  
    107.             },  
    108.             username : {// 验证用户名  
    109.                 validator : function(value) {  
    110.                     return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);  
    111.                 },  
    112.                 message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'  
    113.             },  
    114.             faxno : {// 验证传真  
    115.                 validator : function(value) {  
    116.                     return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);  
    117.                 },  
    118.                 message : '传真号码不正确'  
    119.             },  
    120.             zip : {// 验证邮政编码  
    121.                 validator : function(value) {  
    122.                     return /^[1-9]\d{5}$/i.test(value);  
    123.                 },  
    124.                 message : '邮政编码格式不正确'  
    125.             },  
    126.             ip : {// 验证IP地址  
    127.                 validator : function(value) {  
    128.                     return /d+.d+.d+.d+/i.test(value);  
    129.                 },  
    130.                 message : 'IP地址格式不正确'  
    131.             },  
    132.             name : {// 验证姓名，可以是中文或英文  
    133.                 validator : function(value) {  
    134.                     return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);  
    135.                 },  
    136.                 message : '请输入姓名'  
    137.             },  
    138.             engOrChinese : {// 可以是中文或英文  
    139.                 validator : function(value) {  
    140.                     return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);  
    141.                 },  
    142.                 message : '请输入中文'  
    143.             },  
    144.             engOrChineseAndLength : {// 可以是中文或英文  
    145.                 validator : function(value) {  
    146.                     var len = $.trim(value).length;  
    147.                     if (len >= param[0] && len <= param[1]) {  
    148.                         return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);  
    149.                     }  
    150.                 },  
    151.                 message : '请输入中文或英文'  
    152.             },  
    153.             carNo : {  
    154.                 validator : function(value) {  
    155.                     return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);  
    156.                 },  
    157.                 message : '车牌号码无效（例：粤B12350）'  
    158.             },  
    159.             carenergin : {  
    160.                 validator : function(value) {  
    161.                     return /^[a-zA-Z0-9]{16}$/.test(value);  
    162.                 },  
    163.                 message : '发动机型号无效(例：FG6H012345654584)'  
    164.             },  
    165.             same : {  
    166.                 validator : function(value, param) {  
    167.                     if ($("#" + param[0]).val() != "" && value != "") {  
    168.                         return $("#" + param[0]).val() == value;  
    169.                     } else {  
    170.                         return true;  
    171.                     }  
    172.                 },  
    173.                 message : '两次输入的密码不一致!'  
    174.             }  
    175.         });  
    176. /** 
    177.  * 扩展easyui validatebox的两个方法.移除验证和还原验证 
    178.  */  
    179. $.extend($.fn.validatebox.methods, {  
    180.             remove : function(jq, newposition) {  
    181.                 return jq.each(function() {  
    182.                     $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');  
    183.                         // remove tip  
    184.                         // $(this).validatebox('hideTip', this);  
    185.                     });  
    186.             },  
    187.             reduce : function(jq, newposition) {  
    188.                 return jq.each(function() {  
    189.                     var opt = $(this).data().validatebox.options;  
    190.                     $(this).addClass("validatebox-text").validatebox(opt);  
    191.                         // $(this).validatebox('validateTip', this);  
    192.                     });  
    193.             },  
    194.             validateTip : function(jq) {  
    195.                 jq = jq[0];  
    196.                 var opts = $.data(jq, "validatebox").options;  
    197.                 var tip = $.data(jq, "validatebox").tip;  
    198.                 var box = $(jq);  
    199.                 var value = box.val();  
    200.                 function setTipMessage(msg) {  
    201.                     $.data(jq, "validatebox").message = msg;  
    202.                 };  
    203.                 var disabled = box.attr("disabled");  
    204.                 if (disabled == true || disabled == "true") {  
    205.                     return true;  
    206.                 }  
    207.                 if (opts.required) {  
    208.                     if (value == "") {  
    209.                         box.addClass("validatebox-invalid");  
    210.                         setTipMessage(opts.missingMessage);  
    211.                         $(jq).validatebox('showTip', jq);  
    212.                         return false;  
    213.                     }  
    214.                 }  
    215.                 if (opts.validType) {  
    216.                     var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);  
    217.                     var rule = opts.rules[result[1]];  
    218.                     if (value && rule) {  
    219.                         var param = eval(result[2]);  
    220.                         if (!rule["validator"](value, param)) {  
    221.                             box.addClass("validatebox-invalid");  
    222.                             var message = rule["message"];  
    223.                             if (param) {  
    224.                                 for (var i = 0; i < param.length; i++) {  
    225.                                     message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);  
    226.                                 }  
    227.                             }  
    228.                             setTipMessage(opts.invalidMessage || message);  
    229.                             $(jq).validatebox('showTip', jq);  
    230.                             return false;  
    231.                         }  
    232.                     }  
    233.                 }  
    234.                 box.removeClass("validatebox-invalid");  
    235.                 $(jq).validatebox('hideTip', jq);  
    236.                 return true;  
    237.             },  
    238.             showTip : function(jq) {  
    239.                 jq = jq[0];  
    240.                 var box = $(jq);  
    241.                 var msg = $.data(jq, "validatebox").message  
    242.                 var tip = $.data(jq, "validatebox").tip;  
    243.                 if (!tip) {  
    244.                     tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");  
    245.                     $.data(jq, "validatebox").tip = tip;  
    246.                 }  
    247.                 tip.find(".validatebox-tip-content").html(msg);  
    248.                 tip.css({  
    249.                             display : "block",  
    250.                             left : box.offset().left + box.outerWidth(),  
    251.                             top : box.offset().top  
    252.                         });  
    253.             },  
    254.             hideTip : function(jq) {  
    255.                 jq = jq[0];  
    256.                 var tip = $.data(jq, "validatebox").tip;  
    257.                 if (tip) {  
    258.                     tip.remove;  
    259.                     $.data(jq, "validatebox").tip = null;  
    260.                 }  
    261.             }  
    262.         });  

     

     

     easyUi动态验证提示信息的清除：

    在使用带 validatebox 的输入框，第一次没输入出现如图验证提示信息

    但是点击窗口取消后，再次打开窗口后输入框仍然带有验证信息，查看APi也没有找到解决的方法于是分析了一下页面代码，采用下面处理成功，

      

      $(".validatebox-tip").remove();

      $(".validatebox-invalid").removeClass("validatebox-invalid");

      

    另外，有一篇文章

    easyui验证的删除和恢复 地址http://liuna718-163-com.iteye.com/blog/1726145 供参考

    引用一下他的代码：

    Js代码  收藏代码
    1. $.extend($.fn.validatebox.methods, {    
    2.     remove: function(jq, newposition){    
    3.         return jq.each(function(){    
    4.             $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');  
    5.         });    
    6.     },  
    7.     reduce: function(jq, newposition){    
    8.         return jq.each(function(){    
    9.            var opt = $(this).data().validatebox.options;  
    10.            $(this).addClass("validatebox-text").validatebox(opt);  
    11.         });    
    12.     }     
    13. });  
    14.   
    15. //使用  
    16. $('#id').validatebox('remove'); //删除  
    17. $('#id').validatebox('reduce'); //恢复  

     

    设置Datagrid中Editor中验证的清除：

    Js代码  收藏代码
    1. $.extend($.fn.datagrid.methods, {      
    2.         setDColumnTitle: function(jq, option){      
    3.             if(option.field){    
    4.                 return jq.each(function(){      
    5.                     var $panel = $(this).datagrid("getPanel");    
    6.                     var $field = $('td[field='+option.field+']',$panel);    
    7.                     if($field.length){    
    8.                         var $span = $("span",$field).eq(0);    
    9.                         var $span1 = $("span",$field).eq(1);    
    10.                         $span.html(option.title);    
    11.                         $span1.html(option.title);    
    12.                     }    
    13.                 });    
    14.             }    
    15.             return jq;          
    16.         } ,  
    17.          
    18.         removeRequired: function(jq, field){      
    19.             if(field){    
    20.                 return jq.each(function(){      
    21.                     var $panel = $(this).datagrid("getPanel");    
    22.                     var $field = $('td[field='+field+']',$panel);    
    23.                     if($field.length){    
    24.                         var $input = $("input",$field);                         
    25.                         $input.removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');  
    26.                     }    
    27.                 });    
    28.             }    
    29.             return jq;                  
    30.         },    
    31.         addRequired: function(jq, field){   
    32.             if(field){    
    33.                 return jq.each(function(){      
    34.                     var $panel = $(this).datagrid("getPanel");    
    35.                     var $field = $('td[field='+field+']',$panel);    
    36.                     if($field.length){    
    37.                         var $input = $("input",$field);                         
    38.                         $input.addClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');  
    39.                     }    
    40.                 });    
    41.             }             
    42.         }   
    43. });   
    44.       
    45. 使用：  
    46. $obj.datagrid('removeRequired','startPort');  
    47. $obj.datagrid('addRequired','startPort');  
    48.       
    49.       
posted @ 2016-07-08 16:42  人间值得  阅读(291)  评论(0)  编辑  收藏  举报