jQuery驗證插件 Validate詳解

時間 2019-11-08

原文原文鏈接

1.引入必要的文件,以及語言中文提示包php

2.使用規則以下:html

序號	規則	描述
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

3.jquery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7 </head>
 8 <style>
 9     em.error {
10         background: red;
11          /*自定義錯誤提示圖
12          background: url('../image/error.png') no-repeat left center;
13          */
14         }
15         em.success {
16             background: green;
17         }
18 </style>
19 <script src="/jquery-validation-1.14.0/lib/jquery.js"></script>
20 <script src="/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
21 <!-- 中文錯誤提示信息 -->
22 <script src="/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
23 <body>
24     
25 <form class="cmxform" id="commentForm" method="get" action="">
26   <fieldset>
27     <legend>一個簡單的validate驗證帶驗證提示的評論例子</legend>
28     <p>
29       <label for="cusername">姓名</label>
30       <em>*</em><input id="cusername" name="username" size="25" />
31     </p>
32     <p>
33       <label for="cemail">電子郵件</label>
34       <em>*</em><input id="cemail" name="email" size="25"  />
35     </p>
36     <p>
37       <label for="curl">網址</label>
38       <em>  </em><input id="curl" name="url" size="25" />
39     </p>
40     <p>
41       <label for="comment">你的評論</label>
42       <em>*</em><textarea id="comment" name="comment" cols="22" ></textarea>
43     </p>
44     <p>
45       <label for="cvalcode">驗證碼</label>
46       <input id="valcode" name="valcode"  />7+9=?
47     </p>
48   <p>
49       <input class="submit" type="submit" value="提交"/>
50     </p>
51      
52   <script>
53     /*自定義一個驗證方法*/
54     /*
55     formula是須要驗證方法的名字 比如如required 必須的。
56     value返回的當前input的value值
57     param返回的是當前自定義的驗證格式 比如如：7+9
58     在試用了eval方法 讓字符串相加
59      */
60     $.validator.addMethod("formula",function(value,element,param){
61        return value==eval(param)
62      },"請正確輸入驗證信息");
63 
64      $("#commentForm").validate({
65        rules:{
66          username:{
67            required:true,
68            minlength:2
69          },
70          email:{
71            required:true,
72            email:true
73          },
74          url:"url",
75          comment:"required",
76          valcode: {
77            formula: "7+9"  
78          }
79        },
80        /* 自定義錯誤消息*/
81        messages:{
82          username:{
83            required:"報告,必須輸入點東西",
84            minlength:"長度不夠"
85          }
86        },
87        /*自定義錯誤提示樣式*/
88        errorElement:"em",
89        success:function(label){
90          label.text("成功 ").addClass('success')
91        }
92      });
93   </script>
94 
95 </form>
96 </body>
97 </html>

4.使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，若是須要提交其餘的值，能夠使用 data 選項。git

remote: {
    url: "check-email.php",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {
            return $("#username").val();
        }
    }
}

注意:遠程地址只能輸出 "true" 或 "false"，不能有其餘輸出。ajax