1. 預設validate引數的初始化：

   這個外掛如果要用，肯定很多頁面都會用到，畢竟如果有表單，就需要驗證。而且這個外掛的預設語言是英語，所以我們要轉換成漢語。我們當然不希望在每個頁面的js都寫一遍message。所以我們可以在公用的js裡面對預設message進行初始化。

1. jQuery.extend(jQuery.validator.messages, {
2. required: "必選欄位",
3. remote: "請修正該欄位",
4. email: "請輸入正確格式的電子郵件",
5. url: "請輸入合法的網址",
6. date: "請輸入合法的日期",
7. dateISO: "請輸入合法的日期 (ISO).",
8. number: "請輸入合法的數字",
9. digits: "只能輸入整數",
10. creditcard: "請輸入合法的信用卡號",
11. equalTo: "請再次輸入相同的值",
12. accept: "請輸入擁有合法字尾名的字串",
13. maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字串"),
14. minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字串"),
15. rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字串"),
16. range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
17. max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),
18. min: jQuery.validator.format("請輸入一個最小為 {0} 的值")
19. });

 同時，我們也可以對一些其它引數進行初始化：

1. $.validator.setDefaults({
2. errorClass: "fieldError", // 錯誤的時候新增什麼class
3. ignore: ".ignore", // 預設忽略那些域的驗證
4. ignoreTitle: true,
5. onkeyup: false,
6. errorPlacement: function(error, element) {
7. // 有錯誤了怎麼辦
8. },
9. submitHandler: function(form) {
10. // 所有驗證通過怎麼辦
11. }
12. });

 2. 新增驗證的規則

驗證的規則新增有很多種冷子欲之前的文章介紹的形式：

1. $("#form").validate({
2. debug:true, //除錯模式
3. rules:{
4. username:{
5. required:true, //開啟必填項
6. rangelength:[3,10] //請輸入的數值在3至10位之間
7. };
8. };
9. });

 上面的驗證規則都是寫死的，比如required和rangelength都是外掛內定好的規則，當然這些規則也不一定都能滿足我們的要求，那麼我們該怎麼辦？jquery.validation提供了一個新增自定義規則的方法：addMethod：

1. $.validator.addMethod("usernameCheck", function(value, element){
2. return /^[0-9a-z_A-Z]+$/.test(value);
3. }, "使用者名稱格式錯誤");
4. $("form").validate({
5. rules: {
6. username: {
7. required: true,
8. minlength: 2,
9. maxlength: 20,
10. usernameCheck: true
11. remote: {
12. url: "check_username.jhtml",
13. cache: false
14. }
15. }
16. }
17. });

 上面的外掛會驗證使用者名稱是否必填，長度，使用者名稱是否合法（也可以用內建的pattern進行驗證），同時用ajax驗證使用者名稱是否重複啊什麼的。

有的時候，你可能name不是都一樣，比如說你要提交一組的資料，你的資料格式可能是這個樣子的：

1. <input type="text" class="username" name="member[0].username" />
2. <input type="text" class="username" name="member[1].username" />
3. <input type="text" class="username" name="member[2].username" />
4. <input type="text" class="username" name="member[3].username" />
5. <input type="text" class="username" name="member[4].username" />

 我們當然不願意在rules裡面對5個分別寫驗證規則，太浪費時間，經歷，那麼我們可以用addClassRules方法，同樣的效果，作用在對應的class上面。

1. $.validator.addClassRules({
2. username: {
3. required: true,
4. minlength: 2,
5. maxlength: 20,
6. usernameCheck: true
7. remote: {
8. url: "check_username.jhtml",
9. cache: false
10. }
11. }
12. });
13. $("form").validate(); // 別忘了初始化

 3. 驗證錯誤了怎麼辦？

通常這個外掛都是讓在驗證域的後面，如果我們是一排的同name的checkbox呢？那麼他會把錯誤資訊放到第一個checkbox的後面，這樣會很醜，我們當然是想放到最後一個checkbox的後面，那麼我們用errorPlacement方法：

1. $("form").validate({
2. errorPlacement: function(error, element) {
3. if($(element).is("input[type='checkbox']")) {
4. error.appendTo($(element).parent()); // 放到最後一個
5. } else {
6. $(element).after(error); // 放在錯誤域的後面
7. }
8. }
9. });

 4. 驗證通過了，然後呢？

我們通常可能驗證通過以後，並不想直接提交表單，或許我們也只是用表單進行驗證，然後通過ajax提交表單，那麼我們可以用submitHandler方法：

1. $("form").validate({
2. submitHandler: function(form) {
3. // 驗證成功以後做點你想做的事情
4. form.submit(); // 如果不想提交，就return false。
5. }
6. });

 5. 怎麼通過js直接驗證？

有的時候，即使我們沒有編輯這個域，我們也想要驗證這個域是否正確，那麼怎麼辦？用valid()方法。這個方法可以作用到一個form，也可以作用到一個域，驗證的同時，返回true/false值。

1. var v = $("input").valid();
2. var b = $("form").valid();

 6. 還有更多功能，這裡就不介紹了，大家可以看上面提供的官網和部落格地址。