jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊。

匯入 js 庫

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" src="plugins/jquery-validation/js/additional-methods.min.js"></script>
 

預設校驗規則

預設提示

jQuery Validate提供了中文資訊提示包，位於下載包的 dist/localization/messages_zh.js，內容如下：

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語, 漢語)
 */
$.extend($.validator.messages, {
	required: "這是必填欄位",
	remote: "請修正此欄位",
	email: "請輸入有效的電子郵件地址",
	url: "請輸入有效的網址",
	date: "請輸入有效的日期",
	dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
	number: "請輸入有效的數字",
	digits: "只能輸入數字",
	creditcard: "請輸入有效的信用卡號碼",
	equalTo: "你的輸入不相同",
	extension: "請輸入有效的字尾",
	maxlength: $.validator.format("最多可以輸入 {0} 個字元"),
	minlength: $.validator.format("最少要輸入 {0} 個字元"),
	rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字串"),
	range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),
	max: $.validator.format("請輸入不大於 {0} 的數值"),
	min: $.validator.format("請輸入不小於 {0} 的數值")
});

}));

你可以將該本地化資訊檔案 dist/localization/messages_zh.js 引入到頁面：

使用方式

1、將校驗規則寫到控制元件中

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>輸入您的名字，郵箱，URL，備註。</legend>
    <p>
      <label for="cname">Name (必需, 最小兩個字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可選)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">備註 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

2、將校驗規則寫到 js 程式碼中

$("#submission_verification_form").validate({
        rules: {
			dsApplyerName: {
				required: true
			},
			dsApplyerTel: {
				number: true,
				required: true
			},			
			dsApplyerEmail: {
				email : true,
				required: true
			},
			dsApplyCase: {
				required: true
			}
		},
		 messages: {
		 	dsApplyerName: {
				required: '請輸入使用者名稱'
			},
			dsApplyerTel: {
				required: '請輸入資訊',
				number: '請輸入合法的手機號'
			},
			dsApplyerEmail: {
				required: '請輸入資訊',
				email : '請輸入有效的電子郵件地址'
			},
			dsApplyCase: {
				required: '請輸入資訊'
			}
		 },
        submitHandler : function(form) {
            ajaxSubmit();
        }
    })
 //申請提交方法
 function ajaxSubmit() {
            $.ajax({
                async : false,
                cache : false,
                type : 'POST',
                data : $("#submission_verification_form").serialize(),
                url : DS_ADDR + "/service/serviceDsApply",  
                error : function() {//請求失敗處理函式  
                    alert('失敗');
                },
                success : function(data) { //請求成功後處理函式。    
                  if (data.status == 0) {
                    alert("申請成功！")
                     $(".modal").modal("hide");
                   }else if(data.status == -1){
                    	alert("申請失敗！")
                    	 $(".modal").modal("hide");
                   }
                }
            });
}

3、更改錯誤資訊顯示的樣式

設定錯誤提示的樣式，可以增加圖示顯示，在該系統中已經建立了一個 validation.css，專門用於維護校驗檔案的樣式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}