jQuery03
程序员文章站
2022-06-22 13:08:02
使用jQuery实现表单校验：（单独拿出来介绍表单校验，是因为内容比较多，知识点较多）； 1、注：这里使用validation插件完成对表单数据的校验； validate：一款优秀的表单验证插件——validation插件 （1）特点： 内置验证规则：拥有必填、数字、email、url和信用卡号码等 ......
使用jQuery实现表单校验：（单独拿出来介绍表单校验，是因为内容比较多，知识点较多）；
1、注：这里使用validation插件完成对表单数据的校验；
validate：一款优秀的表单验证插件——validation插件
（1）特点：
内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则；
自定义验证规则：可以很方便的自定义验证规则；
简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能；
实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
（2）既然是一个插件，使用之前就需要先导入文件validate库，当然同时也需要导入jQuery库，另外，也可导入支持中文的国际化资源库，如下：
注：前两个库的导入顺序不能改变（先导jQuery，再导validate），jQuery版本可更改为1.8.3版本的
2、介绍一下validate校验规则，看下图：
根据此规则，我们先来写一段简单的入门校验代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>validate入门案例</title>
6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
7 <!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
8 <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
9 <!--引入国际化js文件-->
10 <script type="text/javascript" src="../../js/messages_zh.js" ></script>
11 <script>
12 $(function(){
13 $("#checkForm").validate({
14 rules:{
15 username:{
16 required:true,
17 minlength:6
18 },
19 password:{
20 required:true,
21 digits:true,
22 minlength:6
23 }
24 },
25 messages:{
26 username:{
27 required:"用户名不能为空!",
28 minlength:"用户名不得少于6位！"
29 },
30 password:{
31 required:"密码不能为空!",
32 digits:"密码必须是整数!",
33 minlength:"密码不得少于6位!"
34 }
35 }
36 });
37 });
38 </script>
39
40 </head>
41 <body>
42 <form action="#" id="checkForm">
43 用户名：<input type="text" name="username" /><br />
44 密码：<input type="password" name="password"/><br />
45 <input type="submit"/>
46 </form>
47 </body>
48 </html>
注：点开代码，里边的messages{}是用来自定义提示语的，当然你如果不写messages{}，他会提示validate自带的提示语；
接下来是用validate进行表单校验的代码（jQuery代码部分）：
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:2
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
digits:true,
minlength:6,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于2个字符!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!"
},
repassword:{
required:"确认密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!",
equalTo:"两次密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
minlength:"姓名不得少于2个字符!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
})
</script>
完整代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>网站注册页面</title>
6 <style>
7 #contanier{
8 border: 0px solid white;
9 width: 1300px;
10 margin: auto;
11 }
12
13 #top{
14 border: 0px solid white;
15 width: 100%;
16 height: 50px;
17 }
18 #menu{
19 border: 0px solid white;
20 height: 40px;
21 background-color: black;
22 padding-top: 10px;
23 margin-bottom: 15px;
24 margin-top: 10px;
25 }
26 .top{
27 border: 0px solid white;
28 width: 405px;
29 height: 100%;
30 float: left;
31 padding-left: 25px;
32 }
33 #top1{
34 padding-top: 15px;
35 }
36 #bottom{
37 margin-top: 13px;
38 text-align: center;
39 }
40
41 #form{
42 height: 500px;
43 padding-top: 70px;
44 background-image: url(../img/regist_bg.jpg);
45 margin-bottom: 10px;
46 }
47 a{
48 text-decoration: none;
49 }
50
51 label.error{
52 background:url(../img/unchecked.gif) no-repeat 10px 3px;
53 padding-left: 30px;
54 font-family:georgia;
55 font-size: 15px;
56 font-style: normal;
57 color: red;
58 }
59
60 label.success{
61 background:url(../img/checked.gif) no-repeat 10px 3px;
62 padding-left: 30px;
63 }
64
65 #father{
66 border: 0px solid white;
67 padding-left: 307px;
68 }
69
70 #form2{
71 border: 5px solid gray;
72 width: 660px;
73 height: 450px;
74 }
75
76 </style>
77 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
78 <!--引入validate插件js文件-->
79 <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
80 <!--引入国际化js文件-->
81 <script type="text/javascript" src="../js/messages_zh.js" ></script>
82 <script>
83 $(function(){
84 $("#registForm").validate({
85 rules:{
86 user:{
87 required:true,
88 minlength:3
89 },
90 password:{
91 required:true,
92 digits:true,
93 minlength:6
94 },
95 repassword:{
96 required:true,
97 equalTo:"[name='password']"
98 },
99 email:{
100 required:true,
101 email:true
102 },
103 username:{
104 required:true,
105 maxlength:5
106 },
107 sex:{
108 required:true
109 }
110 },
111 messages:{
112 user:{
113 required:"用户名不能为空!",
114 minlength:"用户名不得少于3位!"
115 },
116 password:{
117 required:"密码不能为空!",
118 digits:"密码必须是整数!",
119 minlength:"密码不得少于6位!"
120 },
121 repassword:{
122 required:"确认密码不能为空!",
123 equalTo:"两次输入密码不一致!"
124 },
125 email:{
126 required:"邮箱不能为空!",
127 email:"邮箱格式不正确!"
128 },
129 username:{
130 required:"姓名不能为空!",
131 maxlength:"姓名不得多于5位!"
132 },
133 sex:{
134 required:"性别必须勾选!"
135 }
136 },
137 errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
138 success: function(label) { //验证成功后的执行的回调函数
139 //label指向上面那个错误提示信息标签label
140 label.text(" ") //清空错误提示消息
141 .addClass("success"); //加上自定义的success类
142 }
143 });
144 });
145 </script>
146 </head>
147 <body>
148 <div id="contanier">
149 <div id="top">
150 <div class="top">
151 <img src="../img/logo2.png" height="47px"/>
152 </div>
153 <div class="top">
154 <img src="../img/header.png" height="45px" />
155 </div>
156 <div class="top" id="top1">
157 <a href="#">登录</a>
158 <a href="#">注册</a>
159 <a href="#">购物车</a>
160 </div>
161 </div>
162 <div id="menu">
163 <a href="#"><font size="5" color="white">首页</font></a>
164 <a href="#"><font color="white">电脑办公</font></a>
165 <a href="#"><font color="white">手机数码</font></a>
166 <a href="#"><font color="white">鞋靴箱包</font></a>
167 </div>
168 <div id="form">
169 <form action="#" method="get" id="registForm">
170 <div id="father">
171 <div id="form2">
172 <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
173 <tr>
174 <td colspan="2" >
175
176 <font size="5">会员注册</font> USER REGISTER
177 </td>
178 </tr>
179 <tr>
180 <td width="180px">
181
182
183
184 <label for="user" >用户名</label>
185 </td>
186 <td>
187 <em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
188 </td>
189 </tr>
190 <tr>
191 <td>
192
193
194
195 密码
196 </td>
197 <td>
198 <em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
199 </td>
200 </tr>
201 <tr>
202 <td>
203
204
205
206 确认密码
207 </td>
208 <td>
209 <em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
210 </td>
211 </tr>
212 <tr>
213 <td>
214
215
216
217 Email
218 </td>
219 <td>
220 <em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
221 </td>
222 </tr>
223 <tr>
224 <td>
225
226
227
228 姓名
229 </td>
230 <td>
231 <em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
232 </td>
233 </tr>
234 <tr>
235 <td>
236
237
238
239 性别
240 </td>
241 <td>
242 <span style="margin-right: 155px;">
243 <em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
244 <input type="radio" name="sex" value="女"/>女<em></em>
245 <label for="sex" class="error" style="display: none;"></label>
246 </span>
247
248 </td>
249 </tr>
250 <tr>
251 <td>
252
253
254
255 出生日期
256 </td>
257 <td>
258 <em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
259 </td>
260 </tr>
261 <tr>
262 <td>
263
264
265
266 验证码
267 </td>
268 <td>
269 <em style="color: red;">*</em> <input type="text" name="yanzhengma" />
270 <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
271 </td>
272 </tr>
273 <tr>
274 <td colspan="2">
275
276
277
278
279
280
281 <input type="submit" value="注 册" height="50px"/>
282 </td>
283 </tr>
284 </table>
285 </div>
286 </div>
287 </form>
288 </div>
289 <div>
290 <img src="../img/footer.jpg" width="100%"/>
291 </div>
292 <div id="bottom">
293 <a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a>
294 <a href="#">联系我们</a>
295 <a href="#">招贤纳士</a>
296 <a href="#">法律声明</a>
297 <a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a>
298 <a href="#">支付方式</a>
299 <a href="#">配送方式</a>
300 <a href="#">服务声明</a>
301 <a href="#">广告声明</a>
302 <p>
303 Copyright © 2005-2016 传智商城 版权所有
304 </p>
305 </div>
306 </div>
307 </body>
308 </html>
案例代码总结：此代码中要注意label标签的用法（见代码中），还有验证成功后执行的回调函数的用法（一般是固定的，使用时直接复制粘贴）；
下一篇： 浅谈JavaScript浅拷贝和深拷贝