jQueryEasyUi验证

多重验证:

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.       

 ..

阅读更多
文章标签: EasyUI 验证
个人分类: EasyUI
上一篇tomcat与Apache整合(mod_jk)
下一篇apache与tomcat负载集群的3种方法
想对作者说点什么? 我来说一句

jquery easyui api

2012年07月09日 2.3MB 下载

jqueryEasyUi包和中文文档

2014年05月15日 2.64MB 下载

jqueryeasyui.chm

2016年08月01日 2.28MB 下载

jQueryEasyUI

2015年04月07日 3.01MB 下载

jqueryEasyUI

2018年07月16日 3.65MB 下载

jqueryeasyui

2012年12月17日 936KB 下载

JQueryEasyUI

2016年05月20日 2.44MB 下载

没有更多推荐了,返回首页

关闭
关闭