1. 程式人生 > >validate簡介及使用方法與預設的校驗規則

validate簡介及使用方法與預設的校驗規則

一、validate簡介
    validate是JQ的一個外掛。其是對一些常用常見的表單校驗方法進行了封裝。方別使用與開發。同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊,且已翻譯成其他 37 種語言。
二、使用方法
1、因為validate為JQ的外掛,因此使用時,需要先匯入JQ.js檔案,然後再匯入validate.js。 2、在頁面載入成功後對錶單進行校驗。 3、校驗方法 $("選擇器").validate()。 4、編寫規則:                       $("選擇器").validate({                              rules:{},  //規則
                             messages:{}   (messages為自定義提示資訊,其可有可無,如果沒有。則一切提示資訊為預設)                        });
三、預設校驗規則
序號 規則 描述
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


四、舉例
     匯入步驟省略    $(function(){                                    $("#form1").validate({                                             rules:{                                                       //欄位的name屬性:"校驗器"                                                     username:"required(必須的)" //意為name屬性為username的輸入框必須填入信                                                                                                        //息。否則提示預設錯誤資訊。                                                     //欄位的name屬性:{校驗器:"值",校驗器:“值”}                                                           required:true,                                                           digits:true                                                                       }                                                      },                                             messages:{                                                            //欄位的name屬性:“提示資訊”                                                          username:"使用者名稱不能為空"  //意為將預設的提示資訊改為“使用者名稱不能為空”                                                            //欄位的name屬性:{校驗器:"提示資訊",校驗器:“提示資訊”}                                                              }                                                                    });                                                                       });
五、備註
                        在設定提示資訊時,預設為英文。這時,除了使用messages:{}外,還可以匯入messages_zh.js即國際化中文包。使得提示資訊從英文變為中文。