jQuery Validate 外掛介紹

jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊，且已翻譯成其他 37 種語言。
該外掛是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該外掛在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是 1.13.1（截止：2015.05.26）。

自定義手機號驗證程式碼

	// 手機號碼驗證
	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));
	}, "請正確填寫您的手機號碼");

驗證表單

	$("#checkPhoneForm").validate({
		rules : {
			phone : {
				required : true,
				minlength : 11,
				// 自定義方法：校驗手機號在資料庫中是否存在
				// checkPhoneExist : true,
				isMobile : true
			},
			code : {
				digits : true,
				required : true
			}
		},
		messages : {
			phone : {
				required : "請輸入手機號",
				minlength : "確認手機不能小於11個字元",
				isMobile : "請正確填寫您的手機號碼"
			},
			code : {
				required : "請輸入驗證碼",
				digits : "驗證碼應該輸入數字"
			}
		},
		errorPlacement : function(error, element) {
			error.appendTo(element.next().next());
		},
		ignore : ".codeCls"
	});
 

HTML

<form id="checkPhoneForm" class="am-form" action="${base?if_exists}/check-phone-succ.html" method="post" style="width: 100%;">
	<label for="phone" style="display: block;">手機號碼:</label> 
	<input type="text" id="phone" name="phone" value="" maxlength="11" style="width: 220px; display: inline-block; margin-right: 20px;">
	
	<!-- 傳送驗證碼按鈕 -->
	<input type="button" id="btn" value="免費獲取驗證碼" onclick="time(this);" />
	<span class="errorMsg" style="width: 200px; text-align: left; display: inline-block;"></span>
	<br> 
	<label for="code">驗證碼:</label>
	<!-- 輸入驗證碼 --> 
	<input type="text" name="code" id="code" value="" maxlength="4" style="width: 220px;"> 
	<span style="width: 0px; text-align: left; display: inline-block;"></span>
	<!-- 存放錯誤提示資訊 -->
	<span id="codeSpanId" class="errorMsg" style="width: 200px; text-align: left; display: inline-block;"></span>
	<br>
	<div class="am-cf">
		<input type="submit" id="subBtn" class="am-btn am-btn-primary am-btn-sm am-fl" value="下一步">
	</div>
</form>

function isMobileMethod(email){
	var regPhone = /^(13[0-9]|15[012356789]|18[0123456789]|147|145|17[0-9])\d{8}$/;
	if(regPhone.test(email)){
		return true;
	}else{
		return false;
	}	
}