jQuery學習之路（8）- 表單驗證插件-Validation

本文轉載自查看原文 2016-12-20 23:10 1371 jQuery學習之路/ jQuery

▓▓▓▓▓▓ 大致介紹

　　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 // 最小長度是3
7                     }
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: true
22                     },
23 
24                     confirm_password: {
25                         required: true,
26                         minlength: 3,
27                         equalTo: '#password'
28                     },
29 
30                     email: {
31                         required: true,
32                         email: true
33                     },
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: true
20                     },
21 
22                     confirm_password: {
23                         required: true,
24                         minlength: 3,
25                         equalTo: '#password'
26                     },
27 
28                     email: {
29                         required: true,
30                         email: true
31                     }
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 :true
4                     }

　　效果：

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

　　radio的required表示必須選中一個

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

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

　　總結：Validation插件提供了許多的驗證，用戶可以自己添加自己的驗證和提示信息的樣式，但是在博客中我並沒有提及與ajax相關的內容，因為ajax還沒有學習-_-||，如果有什么問題可以和我探討，如果有不對的地方，歡迎指正

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery表單驗證插件 --jQuery Validation Plugin Validation-jQuery表單驗證插件使用方法 jQuery Validation Engine 表單驗證 jquery-validation JQ 表單驗證 jquery.validation.js 表單驗證 form-validation--表單驗證插件 jQuery formValidator表單驗證插件 Validation Engine 表單驗證 jquery-validation.js驗證插件使用詳解 angular2表單驗證之ng2-validation學習