jquery表單驗證validate

jquery表單驗證

下載地址和Demo 

http://jquery.bassistance.de/validate/jquery.validate.zip 首頁： http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery validation 1.7 ---驗證插件 須要:jQuery 1.3.2 或 1.4.2版本

 1 <script type="text/javascript">
 2 
 3 $().ready(function() {
 4 
 5     // validate signup form on keyup and submit
 6     /*
 7      * validate()方法：
 8      *         * 驗證表單，實際上調用就是validate()方法
 9      *         * validate()方法傳入一個json格式數據
10      *              *    rules：表單驗證裏的驗證規則
11      *              *    key：對應的是頁面中表單的name屬性值
12      *              *    value：對應的驗證規則
13      *                 * required：驗證是否爲空
14      *                 * minlength：驗證最小長度
15      *                 * equalTo：對比指定標籤的內容是否一致，"#id"
16      *                 * email：驗證email地址是否正確
17      *             rules：{
18      *                 key:value
19      *             },
20      *              *     messages：表單驗證裏的錯誤提示信息
21      *              *    key：對應的是頁面中表單的name屬性值
22      *              *    value：錯誤提示信息
23      *             
24      *             messages:{
25      *                 key:value
26      *             }
27      */
28     $("#signupForm").validate({
29         rules: {
30             firstname: "required",
31             lastname: "required",
32             username: {
33                 required: true,        //驗證規則起做用
34                 minlength: 5
35             },
36             password: {
37                 required: true,
38                 minlength: 5
39             },
40             confirm_password: {
41                 required: true,
42                 minlength: 5,
43                 equalTo: "#firstname"
44             },
45             email: {
46                 required: true,
47                 email: true
48             },
49             topic: {
50                 required: "#newsletter:checked",
51                 minlength: 2
52             },
53             agree: "required"
54         },
55         messages: {
56             firstname: "請輸入你的姓",
57             lastname: "請輸入你的名",
58             username: {
59                 required: "請輸入用戶名",
60                 minlength: "最小長度不能少於5個字"
61             },
62             password: {
63                 required: "Please provide a password",
64                 minlength: "Your password must be at least 5 characters long"
65             },
66             confirm_password: {
67                 required: "Please provide a password",
68                 minlength: "Your password must be at least 5 characters long",
69                 equalTo: "Please enter the same password as above"
70             },
71             email: "Please enter a valid email address",
72             agree: "Please accept our policy"
73         }
74     });
75 
76 });
77 </script>

表單驗證方法

表單驗證提示信息

調用jquery.validate({});方法進行驗證

$("#empForm").validate({

　　* //自定義驗證規則

　　* //自定義提示信息

})

自定義驗證規則

自定義消息

jquery自定義校驗規則

自定義校驗規則能夠經過自定義檢驗函數的方式新增長校驗規則 步驟以下：

  1. 在定義校驗規則以前定義一個新的方法 

  2. 在rules中指定某個域使用此校驗規則 

  3. 在messages中指定這個域使用此校驗規則沒有經過的提示 信息

1. 在定義校驗規則以前定義一個新的方法

2. 在rules中指定這個某個域使用此校驗規則

3. 在messages中指定這個域使用此校驗規則沒有經過的提示信息

jquery表單驗證案例

js部分

  1 <script type="text/javascript">
  2 /*********************************************************************************************************/    
  3     /*
  4      * 自定義驗證方法
  5      * $.validator.addMethod(name,method,message);
  6      *         * $.validator.addMethod()是固定寫法
  7      *         * name：添加的方法的名字
  8      *         * method：一個函數,function(value,element,param){}
  9      *             * value：對應頁面中元素的value屬性值
 10      *             * element：對應頁面中的元素
 11      *             * param：參數
 12      *         * message：錯誤提示信息
 13      */
 14     $.validator.addMethod("cartLength",function(value,element,param){
 15         var len = value.length;
 16         
 17         if(len!=15&&len!=18){
 18             return false;
 19         }
 20         
 21         return true;
 22         
 23     });
 24     
 25     $.validator.addMethod("cartCheck",function(value,element,param){
 26         var len = value.length;
 27         
 28         var flag; 
 29         
 30         if(len==15){
 31             var pattern = /^[0-9]{15}$/;
 32             
 33             flag = pattern.test(value);
 34         }
 35         
 36         if(len==18){
 37             var pattern  = /^[0-9]{18}|[0-9]{17}x$/;
 38             
 39             flag = pattern.test(value);
 40         }
 41         
 42         if(!flag){
 43             return false;
 44         }
 45         
 46         return true;
 47         
 48         
 49     });
 50 
 51 /*********************************************************************************************************/    
 52     
 53     $().ready(function(){
 54         
 55         $("#empForm").validate({
 56             rules:{
 57                 realname:"required",
 58                 username:{
 59                     required:true,
 60                     rangelength:[5,8]
 61                 },
 62                 psw:{
 63                     required:true,
 64                     rangelength:[6,12]
 65                 },
 66                 psw2:{
 67                     required:true,
 68                     rangelength:[6,12],
 69                     equalTo:"#psw"
 70                 },
 71                 gender:"required",
 72                 age:{
 73                     required:true,
 74                     range:[26,50]
 75                 },
 76                 edu:"required",
 77                 birthday:{
 78                     required:true,
 79                     dateISO:"yyyy/MM/dd"
 80                 },
 81                 checkbox1:"required",
 82                 email:{
 83                     required:true,
 84                     email:"true"
 85                 },
 86                 cart:{
 87                     required:true,
 88                     cartLength:true,
 89                     cartCheck:true
 90                 }
 91             },
 92             messages:{
 93                 realname:"真是名稱不能爲空",
 94                 username:{
 95                     required:"登陸名不能爲空",
 96                     rangelength:"登陸名的長度應該在5至8之間"
 97                 },
 98                 psw:{
 99                     required:"密碼不能爲空",
100                     rangelength:"密碼的長度應該在6至12之間"
101                 },
102                 psw2:{
103                     required:"密碼不能爲空",
104                     rangelength:"密碼的長度應該在6至12之間",
105                     equalTo:"兩次密碼輸入不一致"
106                 },
107                 gender:"你沒有第三種選擇",        //若是在頁面中設置其對應的label標籤進行提示，在驗證規則的信息提示中能夠不設置相關內容
108                 age:{
109                     required:"年齡不能爲空",
110                     range:"年齡必須在26至50之間"
111                 },
112                 edu:"至少要選擇一個學歷",
113                 birthday:{
114                     required:"出生日期不能爲空",
115                     dateISO:"出生日期格式不正確"
116                 },
117                 email:{
118                     required:"email不能爲空",
119                     email:"email地址的格式不正確"
120                 },
121                 cart:{
122                     required:"身份證號碼不能爲空",
123                     cartLength:"身份證號碼長度不正確",
124                     cartCheck:"身份證號碼的格式不正確"
125                 }
126             }
127         });
128         
129     });
130 
131 
132 </script>

HTML部分

  1 <p>員工信息錄入</p>
  2 <form name="empForm" id="empForm" method="post" action="test.html">
  3         <table border=1>
  4             <tr>
  5                 <td>真實姓名(不能爲空 ,沒有其餘要求)</td>
  6                 <td><input type="text" id="realname" name="realname" />
  7                 </td>
  8             </tr>
  9             <tr>
 10                 <td>登陸名(登陸名不能爲空,長度應該在5-8之間,能夠包含中文字符(一個漢字算一個字符)):</td>
 11                 <td><input type="text" id="username" name="username" /></td>
 12             </tr>
 13              <tr> 
 14               <td>密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td>
 15               <td><input type="password" id="psw"  name="psw" style="width:120px" /></td>
 16             </tr>
 17             <tr> 
 18               <td>重複密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td>
 19               <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
 20             </tr>
 21             <!--
 22                                           默認錯誤提示信息，在放置在頁面的表單中第一個控件後面
 23                 <label  style="display: none" for="gender" class="error">請選擇性別</label>
 24                     * for：值對應的是頁面表單中name屬性的值
 25                     * class：設置樣式，設置"error"樣式
 26                     * style："display: none"，設置成隱藏
 27                 
 28                 * 在jquery表單驗證框架運行時，原理以下：
 29                     * 首先，表單驗證框架會在頁面中查找對應的label標籤
 30                         * 在頁面中查找對應label標籤，錯誤提示信息就提示頁面中label標籤內的文本信息
 31                         * 在頁面中沒有找到對應label標籤，就經過驗證框架底層建立一個label標籤進行錯誤信息的提示
 32                 
 33                 
 34                 errorClass: "error",
 35                 validClass: "valid",
 36                 errorElement: "label",
 37                 
 38                 
 39                 label = $("<" + this.settings.errorElement + "/>")            //<label></label>
 40                     .attr({"for":  this.idOrName(element), generated: true})//<label for="gender"></label>
 41                     .addClass(this.settings.errorClass)                        //<label for="gender" class="error"></label>
 42                     .html(message || "");                                    //<label for="gender" class="error">錯誤提示信息</label>
 43                                       
 44             -->
 45             <tr>
 46                 <td>性別(必選其一)</td>
 47                 <td>
 48                     <input  type="radio" id="gender_male" value="m" name="gender"/>男
 49                     <input  type="radio" id="gender_female" value="f" name="gender"/>女
 50                     <label  style="display: none" for="gender" class="error">請選擇性別</label>
 51                 </td>
 52             </tr>
 53             <tr>
 54                 <td>年齡(必填26-50):</td>
 55                 <td><input type="text" id="age" name="age" /></td>
 56             </tr>
 57             
 58             <tr> 
 59               <td>你的學歷:</td>
 60               <td> <select name="edu" id="edu">
 61                       <option value="">－－請選擇你的學歷－－</option>
 62                       <option value="a">專科</option>
 63                       <option value="b">本科</option>
 64                       <option value="c">研究生</option>
 65                       <option value="e">碩士</option>
 66                       <option value="d">博士</option>
 67                   </select>
 68               </td>
 69             </tr>
 70             
 71             <tr> 
 72               <td>出生日期(1982/09/21):</td>
 73                <td><input type="text" id="birthday"  name="birthday" style="width:120px" value="" /></td>
 74             </tr>
 75             
 76            <tr> 
 77               <td>興趣愛好:</td>
 78               <td colspan="2"> 
 79                   <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 
 80                   <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 
 81                   <input type="checkbox" name="checkbox1" id="qq3" value="2" />上網 
 82                   <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅遊 
 83                   <input type="checkbox" name="checkbox1" id="qq5" value="4" />購物 
 84                   <label  style="display: none" for="checkbox1" class="error">您的興趣愛好,至少選擇一個</label>
 85               </td>
 86             </tr>
 87              <tr> 
 88                   <td align="left">電子郵箱:</td>
 89                   <td><input type="text" id="email" style="width:120px" name="email" /></td>
 90               </tr>
 91               <tr> 
 92                   <td align="left">身份證(15-18):</td>
 93                   <td><input type="text" id="cart"  style="width:200px" name="cart" /></td>
 94               </tr>
 95             <tr>
 96                 <td></td>
 97                 <td></td>
 98                 <td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>
 99             </tr>
100         </table>
101 
102 </form>