## validation 插件 Validation 是一個優秀的表單驗證插件。 ### 1.快速上手 首先引入Validation庫。 `<script src="./js/jquery.validate.js" type="text/javascript"></script>` ~~~javascript <p> <label for="cusername">姓名</label> <em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" /> </p> <p> <label for="cemail">電子郵件</label> <em>*</em><input class="required email" id="cemail" name="email" size="25" /> </p> <p> <label for="curl">網址</label> <em> </em><input class="url" id="curl" name="url" size="25" value="" /> </p> $('#commentForm').validate(); ~~~ ### 2.不同的寫法 **第一種寫法** 這種寫法需要引入一個支持固定格式解析的jQuery插件，Validation將其很好的融合進驗證規則編碼中。 ~~~javascript <p> <label for="cusername">姓名</label> <em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" /> </p> <p> <label for="cemail">電子郵件</label> <em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25" /> </p> <p> <label for="curl">網址</label> <em> </em><input class="{validate:{url:true}}" id="curl" name="url" size="25" value="" /> </p> $('#commentForm').validate({meta:"validate"}); ~~~ **第二種方法** 不將驗證規則寫在 class 屬性中，而寫在javascript代碼中。 ~~~javascript $('#commentForm').validate({ rules:{ username:{ required:true, minlength:2 }, email:{ required:true, email:true }, url:"url", comment:"required" } }); ~~~ ### 3.默認校驗規則 |驗證規則|解釋| |---|---| |required:true | 必輸字段 | |remote:"check.php" | 使用ajax方法調用check.php驗證輸入值 | |email:true| 必須輸入正確格式的電子郵件 | |url:true | 必須輸入正確格式的網址 | |date:true | 必須輸入正確格式的日期 | |dateISO:true | 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 | |number:true | 必須輸入合法的數字(負數，小數) | |digits:true | 必須輸入整數 | |creditcard: | 必須輸入合法的信用卡號 | |equalTo:"#field" | 輸入值必須和#field相同 | |accept: | 輸入擁有合法后綴名的字符串（上傳文件的后綴）| |maxlength:5 | 輸入長度最多是5的字符串(漢字算一個字符) | |minlength:10 | 輸入長度最小是10的字符串(漢字算一個字符) | |rangelength:[5,10] | 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符) | |range:[5,10] | 輸入值必須介于 5 和 10 之間 | |max:5 | 輸入值不能大于5 | |min:10 | 輸入值不能小于10 |