jquery.validate.js【簡單實用的表單驗證框架】【進階版】

這個是這個插件的官網和我找到的一個中文博客。(雖然插件的名字叫做jquery.validte.js，但其實，這個插件的名字叫jquery validation)。

基礎的用法可以去看冷子欲的文章或者上面的博客，我這里就不詳細介紹了。

首先最重要的一點，所有要驗證的域都要在form里，同時這些域都要有name屬性。

詳細內容請見原文鏈接：http://www.gbtags.com/gb/share/5765.htm

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.  
5. $("form").validate({
6. rules: {
7. username: {
8. required: true,
9. minlength: 2,
10. maxlength: 20,
11. usernameCheck: true
12. remote: {
13. url: "check_username.jhtml",
14. cache: false
15. }
16. }
17. }
18. });

 

 上面的插件會驗證用戶名是否必填，長度，用戶名是否合法（也可以用內置的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. 還有更多功能，這里就不介紹了，大家可以看上面提供的官網和博客地址。

 

 

1. 代碼演示：http://www.gbtags.com/gb/rtreplayerpreview/1140.htm

 詳細內容請見原文鏈接： http://www.gbtags.com/gb/share/5765.htm