jQuery學習之路（8）- 表單驗證外掛程式-Validation

標籤：自己的   訪問   注意   ror   class   表示   uml   element   dig   

▓▓▓▓▓▓ 大致 介紹

　　jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓用戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊，且已翻譯成其他 37 種語言。該外掛程式是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該外掛程式在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 外掛程式。

　　：http://static.runoob.com/download/jquery-validation-1.14.0.zip

 

▓▓▓▓▓▓ 基本文法

　　　Validate外掛程式需要jQuery,所以我們需要在頭部引入jQuery和Validate檔案

1     <script type="text/javascript" src="lib/jquery.js"></script>2     <script type="text/javascript" src="dist/jquery.validate.min.js"></script>

　　

　　檔案引入完畢，先寫個簡單的表單

 1 <form class="cmxform" id="commentForm" method="get"> 2       <fieldset> 3         <legend>驗證完整的表單</legend> 4         <p> 5           <label for="firstname">名字</label> 6           <input id="firstname" name="firstname" type="text"> 7         </p> 8         <p> 9           <label for="lastname">姓氏</label>10           <input id="lastname" name="lastname" type="text">11         </p>12         <p>13           <label for="username">使用者名稱</label>14           <input id="username" name="username" type="text">15         </p>16         <p>17           <label for="password">密碼</label>18           <input id="password" name="password" type="password">19         </p>20         <p>21           <label for="confirm_password">驗證密碼</label>22           <input id="confirm_password" name="confirm_password" type="password">23         </p>24         <p>25           <label for="email">Email</label>26           <input id="email" name="email" type="email">27         </p>28         <p>29           <label for="agree">請同意我們的聲明</label>30           <input type="checkbox" class="checkbox" id="agree" name="agree">31         </p>32         <p>33           <input class="submit" type="submit" value="提交">34         </p>35       </fieldset>36     </form>

 

　　然後我們開始寫驗證表單的代碼

　　首先我們需要知道那個表單需要驗證

1         $(function(){2 3             $(‘#commentForm‘).validate();4 5         });

　　然後開始寫驗證的規則，要注意這裡選擇元素是根據每個標籤的name屬性選擇的，基本文法如下

1             $(‘#commentForm‘).validate({2                 rules: {3                     firstname: ‘required‘,//required 表示是必要欄位4                     lastname: {5                         required: true,6                         minlength: 3 // 最小長度是37                     }8                 }9             });

　

　　從上面可以看出，如果一個資訊只有一個驗證要求可以寫成一行，比如 firstname；如果有多個驗證要寫成像 lastname 這種形式；知道了基本的文法

　　在看看Validation都提供了那些校正規則

(1)、required:true               必輸欄位(2)、remote:"remote-valid.jsp"   使用ajax方法調用remote-valid.jsp驗證輸入值(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:true             必須輸入合法的信用卡號(10)、equalTo:"#password"        輸入值必須和#password相同(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

 

　　我們將上面的表單驗證完善一下，如下

 1         $(function(){ 2  3             $(‘#commentForm‘).validate({ 4                 rules: { 5  6                     firstname: { 7                         required: true, 8                         minlength: 5 9                     },10 11                     lastname: "required",12 13                     username: {14                         required: true,15                         rangelength: [4,6]16                     },17 18                     password: {19                         required: true,20                         minlength: 4,21                         number: true22                     },23 24                     confirm_password: {25                         required: true,26                         minlength: 3,27                         equalTo: ‘#password‘28                     },29 30                     email: {31                         required: true,32                         email: true33                     },34 35                 }36             });37         });

 

 

　　效果：

　　可以看到，這裡的提示預設是英文的不太滿意，將提示資訊更改成中文有兩種方式

　　第一種方式：引入語言檔案（推薦）

1     <script type="text/javascript" src="dist/localization/messages_zh.js"></script>

　　他的提示資訊是：

 1     required: "這是必要欄位", 2     remote: "請修正此欄位", 3     email: "請輸入有效電子郵件地址", 4     url: "請輸入有效網址", 5     date: "請輸入有效日期", 6     dateISO: "請輸入有效日期 (YYYY-MM-DD)", 7     number: "請輸入有效數字", 8     digits: "只能輸入數字", 9     creditcard: "請輸入有效信用卡號碼",10     equalTo: "你的輸入不相同",11     extension: "請輸入有效尾碼",12     maxlength: $.validator.format("最多可以輸入 {0} 個字元"),13     minlength: $.validator.format("最少要輸入 {0} 個字元"),14     rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字串"),15     range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),16     max: $.validator.format("請輸入不大於 {0} 的數值"),17     min: $.validator.format("請輸入不小於 {0} 的數值")

 

　　第二種方式：自己寫提示資訊

 1             $(‘#commentForm‘).validate({ 2                 rules: { 3  4                     firstname: { 5                         required: true, 6                         minlength: 5 7                     }, 8  9                     lastname: "required",10 11                     username: {12                         required: true,13                         rangelength: [4,6]14                     },15 16                     password: {17                         required: true,18                         minlength: 4,19                         number: true20                     },21 22                     confirm_password: {23                         required: true,24                         minlength: 3,25                         equalTo: ‘#password‘26                     },27 28                     email: {29                         required: true,30                         email: true31                     }32                 },33                 messages: {34 35                          firstname: "請輸入您的名字",36                          lastname: "請輸入您的姓氏",37                          username: {38                            required: "請輸入使用者名稱",39                            minlength: "使用者名稱必需由兩個字母組成"40                          },41                          password: {42                            required: "請輸入密碼",43                            minlength: "密碼長度不能小於 5 個字母"44                          },45                          confirm_password: {46                            required: "請輸入密碼",47                            minlength: "密碼長度不能小於 5 個字母",48                            equalTo: "兩次密碼輸入不一致"49                          },50                          email: "請輸入一個正確的郵箱",51                        }52             });

 

　　　　

　　效果：

 

　　注意：還有一種寫驗證的方式是在 class 中寫，例如

          <input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">

　　但是不推薦這種寫法，因為不符合樣式與結構分離的要求，並且還需要自己下載一個jquery.metadata.js檔案才能夠這樣寫

 

 

▓▓▓▓▓▓ 表單提交問題

　　可以在表單提交之前執行我們自訂的代碼，當我們的自訂代碼執行完畢後再提交表單

1             $(‘#commentForm‘).validate({2 3                 submitHandler: function(){4                     alert("提交事件成功");5                     from.submit();6                 }7                             });

　　可以設定validate的預設值

1         $.validate.setDefaults({2             submitHandler: function(){3                 alert("提交成功！");4                 form.submit();5             }6         });

　　只驗證不提交表單

1         $(function(){2          $("#commentForm").validate({3                 debug:true;4             });5         });

 

▓▓▓▓▓▓ 錯誤提示資訊設定

　　1、錯誤資訊位置設定

　　errorPlacement方法是設定錯誤資訊顯示在哪，預設值是在驗證元素的後面

1         errorPlacement: function(error, element) {  2             error.appendTo(element.parent());  3         }

　　errorClass 是設定錯誤資訊的樣式，後跟css類名

　　errorElement 是設定用什麼標籤包住錯誤資訊，預設值是<label>

　　errorLabelContainer 是設定將所有的錯誤資訊包在一個地方

　　wrapper 是設定用什麼標籤再把上邊的 errorELement 包起來

　　例如：

1                 errorPlacement: function(error,element){2                     $(element).closest(‘form‘).find(‘label[for="‘+ element.attr("id") +‘"]‘).append(error);3                 },

　　是將錯誤提示資訊顯示在驗證的資訊前面

　　效果：

 　　例如：

1                 errorElement: ‘span‘,2                 errorClass: ‘commentError‘,3                 errorLabelContainer: $(‘form div.error‘),4                 wrapper: ‘li‘,

　　是將每個提示資訊用<span>標籤包起來，給他們添加css名為 .commentError 的樣式， 並把他們都包再一個class為 error 的div裡，在用<li>把每個提示資訊包起來　　

效果：

 

　　2、錯誤資訊樣式設定

　　有兩種方式可以修改提示資訊的樣式

　　第一種就是採用下載Validation時內建的樣式檔案

1     <link href="demo/css/screen.css" type="text/css" rel="stylesheet" />

 

　　

　　第二種方式就是自己定義樣式（當然也可以修改內建的css檔案）

　　例如添加這樣的樣式：

 1         input.error { border: 1px solid red; } 2         label.error { 3           background:url("demo/images/unchecked.gif") no-repeat 0px 0px; 4  5           padding-left: 16px; 6  7           padding-bottom: 2px; 8  9           font-weight: bold;10 11           color: #EA5200;12         }13         label.checked {14           background:url("demo/images/checked.gif") no-repeat 0px 0px;15         }

　　效果：

 

▓▓▓▓▓▓ 驗證時的問題

　　1、驗證的元素通過

　　驗證的元素通過驗證時如果要進行操作，可以使用 success ，他可以接受字串或者是函數，當接受的是字串的時候是添加樣式

　　例如：

                success: function(){                    alert(1);                },

　　是在要驗證的元素通過驗證時，彈出1

 

　　例如：

           　　 success: "valid"    

　　是將css樣式名為 .valid 添加到元素上

　　

　　2、驗證方式

 

 

▓▓▓▓▓▓ 自訂校正

　　　雖然Validation提供了許多驗證的方式，但是有些情況還是不夠用的，所以如果要添加自訂的校正方式可以使用 addMethod 方法，通常將自訂的方法寫在 additional-methods.js 中，然後要引入這個檔案

    <script type="text/javascript" src="dist/additional-methods.js"></script>

　　寫入 additional-methods.js 檔案的內容

　　  例如：

1 $.validator.addMethod("isZipCode", function(value, element) {   2     var tel = /^[0-9]{6}$/;3     return this.optional(element) || (tel.test(value));4 }, "請正確填寫您的郵遞區號");

　　只要把這段代碼寫入 additional-methods.js 檔案就可以使用了

　　例如：

1                     zipcode: {2                         required: true,3                         isZipCode :true4                     }

　　效果：

 

▓▓▓▓▓▓ radio 和 checkbox、select 的驗證

　　radio的required表示必須選中一個

　　checkbox的required表示必須選中，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間

　　select的required表示選中的value不可為空，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間

 

　　總結：Validation外掛程式提供了許多的驗證，使用者可以自己添加自己的驗證和提示資訊的樣式，但是在部落格中我並沒有提及與ajax相關的內容，因為ajax還沒有學習-_-||，如果有什麼問題可以和我探討，如果有不對的地方，歡迎指正

 

jQuery學習之路（8）- 表單驗證外掛程式-Validation