1. 程式人生 > >jQueryEasyU校驗郵箱、手機號等

jQueryEasyU校驗郵箱、手機號等

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.         $(function () {   
  10. //設定text需要驗證
  11.             $('input[type=text]').validatebox();   
  12.         })   
  13.     </script>   
  14. </head>   
  15. <body>   
  16.     郵箱驗證:<input type="text" validtype="email" required="true" missingMessage="不能為空" invalidMessage="郵箱格式不正確" /><br />   
  17.     網址驗證:<input type="text" validtype="url" invalidMessage="url格式不正確[http://www.example.com]" /><br />   
  18.     長度驗證:<input type="text" validtype="length[8,20]" invalidMessage=
    "有效長度8-20" /><br />   
  19.     手機驗證:<input type="text" validtype="mobile"  /><br />   
  20.     郵編驗證:<input type="text" validtype="zipcode" /><br />   
  21.     賬號驗證:<input type="text" validtype="account[8,20]" /><br />   
  22.     漢子驗證:<input type="text" validtype="CHS" /><br />   
  23.     遠端驗證:<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="使用者名稱已存在"/>   
  24. </body>   
  25. </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>

自定義驗證:

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. returnfalse;   
  32.             } else {   
  33. if (!/^[\w]+$/.test(value)) {   
  34.                     $.fn.validatebox.defaults.rules.account.message = '使用者名稱只能數字、字母、下劃線組成.';   
  35. returnfalse;   
  36.                 } else {   
  37. returntrue;   
  38.                 }   
  39.             }   
  40.         }, message: ''
  41.     }   
  42. })  
//擴充套件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程式碼 複製程式碼 收藏程式碼
  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. returnfalse;   
  6.              }else {   
  7. returntrue;   
  8.              }     
  9.         },    
  10.         message: '該下拉框為必選項'
  11.     }    
  12. });   
$.extend($.fn.validatebox.defaults.rules, { 
	selectValueRequired: { 
		validator: function(value,param){ 			
			 if (value == "" || value.indexOf('請選擇') >= 0) { 
			 	return false;
			 }else {
			 	return true;
			 }  
		}, 
		message: '該下拉框為必選項' 
	} 
}); 
Java程式碼 複製程式碼 收藏程式碼
  1. <select id="serviceType" name="serviceType" style="width: 150px"class="easyui-combobox" required="true" validType="selectValueRequired"></select>  
<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.         }  
equalTo : {
			validator : function(value, param) {
				return $("#" + param[0]).val() == value;
			},
			message : '兩次輸入的密碼不一致!'
		},
		checkPassword :{
			validator : function(value,param){
				var sysUser = {};
				var flag ;
				sysUser.userPassword = value;
				$.ajax({
	    			url : root + 'login/checkPwd.do',
	    			type : 'POST',	    			
	    			timeout : 60000,
	    			data:sysUser,
	    			async: false,  
	    			success : function(data, textStatus, jqXHR) {	
	    				if (data == "0") {
	    					flag = true;	
	    				}else{
	    					flag = false;
	    				}
	    			}
				});
				if(flag){
					$("#userPassword").removeClass('validatebox-invalid');
				}
				return flag;
			},
			message: '原始密碼輸入錯誤!'
		}
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>  
<table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;">
	<tr>
		<td>請輸入原密碼:</td>
		<td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"
			data-options="required:true" validType="checkPassword"/>
		</td>
	</tr>
	<tr>
		<td>請輸入新密碼:</td>
		<td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"
			data-options="required:true" />
		</td>
	</tr>
	<tr>
		<td>請確認輸入新密碼:</td>
		<td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"
			class="easyui-validatebox" data-options="required:true"  validType="equalTo['newPassword']" />
		</td>
	</tr>
</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. returntrue;   
  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. returntrue;   
  206.                 }   
  207. if (opts.required) {   
  208. if (value == "") {   
  209.                         box.addClass("validatebox-invalid");   
  210.                         setTipMessage(opts.missingMessage);   
  211.                         $(jq).validatebox('showTip', jq);   
  212. returnfalse;   
  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. returnfalse;   
  231.                         }   
  232.                     }   
  233.                 }   
  234.                 box.removeClass("validatebox-invalid");   
  235.                 $(jq).validatebox('hideTip', jq);   
  236. returntrue;   
  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.         });  

在使用帶 va