在做項目過程中，使用了jquery的一個驗證表單的插件--jquery validation。這里簡單整理了一下這個強大的表單驗證插件的一些常用的方法，以及在使用過程中需要注意的地方。
首先要想使用，首先需要引入jquery，然后引入jquery validation兩個文件。然后通過插件的初始化方法，進行初始化，之后就可以按照自己的需要進行使用了。
//引入jquery，版本1.6+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> //引入jquery validation <script type="text/javascript" src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
下面簡單介紹一下使用方法，他有兩種使用方式，第一種，直接將驗證的方式寫在標簽上，這個我個人不是很喜歡，感覺不夠分離；我比較喜歡第二種方式，通過JS配置表單需要驗證的字段，然后就行提交操作。插件內部提供了一些常用的驗證方法。
| 序號 | 規則 | 描述 |
|---|---|---|
| 1 | required:true | 必須輸入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法調用 check.php 驗證輸入值。 |
| 3 | email:true | 必須輸入正確格式的電子郵件。 |
| 4 | url:true | 必須輸入正確格式的網址。 |
| 5 | date:true | 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。 |
| 6 | dateISO:true | 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。 |
| 7 | number:true | 必須輸入合法的數字（負數，小數）。 |
| 8 | digits:true | 必須輸入整數。 |
| 9 | creditcard: | 必須輸入合法的信用卡號。 |
| 10 | equalTo:"#field" | 輸入值必須和 #field 相同。 |
| 11 | accept: | 輸入擁有合法后綴名的字符串（上傳文件的后綴）。 |
| 12 | maxlength:5 | 輸入長度最多是 5 的字符串（漢字算一個字符）。 |
| 13 | minlength:10 | 輸入長度最小是 10 的字符串（漢字算一個字符）。 |
| 14 | rangelength:[5,10] | 輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。 |
| 15 | range:[5,10] | 輸入值必須介於 5 和 10 之間。 |
| 16 | max:5 | 輸入值不能大於 5。 |
| 17 | min:10 | 輸入值不能小於 10。 |
<form>
郵箱：<intput type="text" name="email">
<input type="submit" value="提交">
</form>
<script>
//以下是一個基本的表單驗證的構造
$('from').validate({
debug: true, //調試模式，只驗證不提交
rules: { //所有的驗證規則都寫在這里
email: {
required: true, //必填項
email: true, //郵箱格式
remote:{
type:"POST",
url:"/user/checkemail", //檢測地址
data:{
email: function() { return $("input[name=email]").val()} //獲取郵箱
},
dataFilter: function(data) { //data為字符串
data = $.parseJSON(data);
if(data.errno) {
return false;
}else {
return true
}
}
}
}
},
messages: { //所有驗證規則的錯誤提示寫在這里
email: {
required: '請填寫電子郵箱',
email: '請填寫正確格式的電子郵箱',
remote: '郵箱已注冊'
}
}
});
</script>
當然，有些時候我們在提交的時候可能會對某些字段單獨處理，jquery validation提供了這樣的方法讓我們進行驗證。以上面為例子：
$('input[name=email]').rules('add', {
required: true,
email: true
});
//可以使用 $.rules('remove', {})，刪除規則
以上是它提供的一些常用的驗證方法，當然在我們項目中，大部分情況下，我們是會有復雜的邏輯，導致我們不能使用上述提供的方法，需要我們自己實現一些驗證方法。不過，不用擔心這個強大的插件也提供了很好的擴展方法，同樣的也以上面為例。
$.validator.addMethod('email', function(emailValue, element, param) {
var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(reg.test(emailValue)) {
return true;
}
return false;
});
插件默認提供了展示錯的位置以及內容，同時插件提供了修改錯誤容器和class的方法：
| 參數 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| errorClass | String | 指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 | "error" |
| errorElement | String | 用什么標簽標記錯誤，默認是 label，可以改成 em。 | "label" |
| errorContainer | Selector | 顯示或者隱藏驗證信息，可以自動實現有錯誤信息出現時把容器屬性變為顯示，無錯誤時隱藏，用處不大。 errorContainer: "#messageBox1, #messageBox2" |
|
| errorLabelContainer | Selector | 把錯誤信息統一放在一個容器里面。 |
|
| wrapper | String | 用什么標簽再把上邊的 errorELement 包起來。 |
另外還可以通過，errorPlacement和success監聽，成功和失敗，舉例如下：
//設置默認的規則 $.validator.setDefaults({ errorPlacement: function(errmsg, element) { //errmsg：錯誤信息（可以通過messages自定義）；element錯誤的元素 }, success: function(label, element) { //label：顯示正確信息的容器；element：驗證通過的元素 } });
與此同時，插件還提供了以下比較有用的方法：
1.submitHandler
可以在提交前，做一些自己想要做的判斷
2.debug
可以測試的時候使用，只驗證不提交
3.ignore
忽略不需要驗證的元素，值是選擇器
4.remote
可以進行異步校驗
5.resetForm
重置表單
6.format
可以對規則中的參數代替模版中的{n}
更多的方法可以查看驗證組件的官網進行查看。
這里特別要說的是，需要注意select、radio、checkbox的時機，這里有一個小技巧，在無法觸發select展示錯誤的時候，可以在errorPlacement中，執行一下$(element).blur()方法。
插件也提供了一些觸發方式可以進行配置，如：onsubmit、onfocusout、onkeyup、onclick、focusInvalid、focusCleanup
2014-11-13：
瀏覽器兼容性：IE6+,chrome，firefox，safari，opera10+
最好使用以下jquery版本（官方測試）：1.6.4 1.7.2 1.8.3 1.9.1 1.11.1
親測：IE6下 1.9.0有問題，換成1.9.1問題解決
參考資料：