1. 程式人生 > >jQuery Validate.js驗證手機號碼。

jQuery Validate.js驗證手機號碼。

html:

<div class="edit_phone1 tis_edit">
<form  id="cell" class="form-horizontal" method="get" action="">
	<div class="select_div bkbj">
		<span style="width:86px;">原手機號碼:</span>
		<input type="text" disabled="disabled" id="old_phone2">
	</div>
	<div class="select_div new-phone" style="margin-bottom: 0;">
		<span  style="width:86px;">新手機號碼:</span>
		<input type="text" id="new_phone" name="new_phone" autofocus="autofocus">
	</div>
	<div style="color:red;text-align: center;">
		<p style="margin-right: 54px;">備註:新手機號碼將替代原手機號碼</p>
		<p style="margin-left: 17px;">該教師的登入賬號將為新手機號碼</p>
	</div>
	</form>
</div>

js:

$(function(){
	$("#cell").validate({
	    rules: {
	    	new_phone : {  
	            required : true,  
	            minlength : 11, 
	            isMobile : true  
	        		}, 
	        },
	        messages: {
		        new_phone : {  
		        required : "請輸入手機號",  
		        minlength : "不能小於11個字元",  
		        isMobile : "請正確填寫手機號碼"  
		  	}
  		},
	});
})

自定義驗證手機規則(一定要寫):

//手機號碼驗證  
jQuery.validator.addMethod("isMobile", function(value, element) {  
     var length = value.length;  
     var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
     return this.optional(element) || (length == 11 && mobile.test(value));  
}, "請正確填寫手機號碼");