jQ学习之利用validate插件进行表单的内容校验

在自己测试的时候,发现

1、form标签必须包裹table标签 否则无效,

2、引入包时必须先引入基础jQ包,之后引入validate包,最后引入message包,因为前者是后者的基础包。

注释在代码里,直接上代码:

 1     <div id="tbl" style=" margin:auto; height: 1000px; border: blue 1px solid;position: relative; text-align: center;">
 2 
 3             <form action="#" method="get" id="checkForm">
 4                 <table style="margin: auto; padding-top:400px ;">
 5                     <tr>
 6                         <td>
 7                             姓名
 8                         </td>
 9 
10                         <td>
11                             <span style="color: red;">
12                                 *
13                             </span>
14                             <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" />
15                             <span id="userNameSpan" style="color: gray; display: none;">
16                             </span>
17                         </td>
18                     </tr>
19 
20                     <tr>
21                         <td>
22                             年龄
23                         </td>
24 
25                         <td>
26                             <span style="color: red;">
27                                 *
28                             </span>
29                             <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" />
30                             <span id="ageSpan" style="color: gray; display: none;">
31 
32                             </span>
33                         </td>
34                     </tr>
35                     <tr>
36                         <td>
37                             账号
38                         </td>
39 
40                         <td>
41                             <span style="color: red;">
42                                 *
43                             </span>
44                             <input type="text" name="userNumber" id="userNumber" />
45                             <span id="userNumberSpan">
46 
47                             </span>
48                         </td>
49                     </tr>
50                     <tr>
51                         <td>
52                             密码
53                         </td>
54 
55                         <td>
56                             <span style="color: red;">
57                                 *
58                             </span>
59                             <input type="password" name="password" id="password" />
60                             <span id="passwordSpan">
61 
62                             </span>
63                         </td>
64                     </tr>
65                     <tr>
66                         <td>
67                             再次输入密码
68                         </td>
69 
70                         <td>
71                             <span style="color: red;">
72                                 *
73                             </span>
74                             <input type="password" name="repassword" id="repassword" />
75                             <span id="repasswordSpan">
76 
77                             </span>
78                         </td>
79                     </tr>
80                     <tr>
81                         <td colspan="2">
82                             <input type="submit" value="校验" />
83                         </td>
84                     </tr>
85                 </table>
86             </form>
87         </div>
 1         $(function() {
 2                 //注意格式
 3                 $("#checkForm").validate({
 4                     rules: {
 5                         userName: {
 6                             required: true
 7                         },
 8                         age: {
 9                             required: true
10                         },
11                         userNumber: {
12                             required: true,//注意每个语句之间分割使用','
13                             minlength: 3,
14                             maxlength: 6
15                         },
16                         password: {
17                             required: true,
18                             rangelength: [3, 6]
19                         },
20                         repassword: {
21                             required: true,
22                             equalTo: "[name='password']"
23                         }
24                     },
25                     messages: {
26           //编写方式和rules相同 
27                     }
28                 });
29             })

 

posted @ 2019-07-16 18:29  我叫张小凡  阅读(272)  评论(0编辑  收藏  举报