limuma

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
jQuery03

使用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>
validate入门代码

　　注：点开代码，里边的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>&nbsp;&nbsp;&nbsp;&nbsp;         
164                 <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
165                 <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
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                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
176                                         <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER 
177                                     </td>
178                                 </tr>
179                                 <tr>
180                                     <td width="180px">
181                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
182                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
183                                         &nbsp;&nbsp;&nbsp;
184                                         <label for="user" >用户名</label>
185                                     </td>
186                                     <td>
187                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>
188                                     </td>
189                                 </tr>
190                                 <tr>
191                                     <td>
192                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
193                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
194                                         &nbsp;&nbsp;&nbsp;
195                                         密码
196                                     </td>
197                                     <td>
198                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password"  name="password" size="35px" id="password" />
199                                     </td>
200                                 </tr>
201                                 <tr>
202                                     <td>
203                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
204                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
205                                         &nbsp;&nbsp;&nbsp;
206                                         确认密码
207                                     </td>
208                                     <td>
209                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px"/>
210                                     </td>
211                                 </tr>
212                                 <tr>
213                                     <td>
214                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
215                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
216                                         &nbsp;&nbsp;&nbsp;
217                                         Email
218                                     </td>
219                                     <td>
220                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>
221                                     </td>
222                                 </tr>
223                                 <tr>
224                                     <td>
225                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
226                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
227                                         &nbsp;&nbsp;&nbsp;
228                                         姓名
229                                     </td>
230                                     <td>
231                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>
232                                     </td>
233                                 </tr>
234                                 <tr>
235                                     <td>
236                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
237                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
238                                         &nbsp;&nbsp;&nbsp;
239                                         性别
240                                     </td>
241                                     <td>
242                                         <span style="margin-right: 155px;">
243                                             <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<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                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
253                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
254                                         &nbsp;&nbsp;&nbsp;
255                                         出生日期
256                                     </td>
257                                     <td>
258                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday"  size="35px"/>
259                                     </td>
260                                 </tr>
261                                 <tr>
262                                     <td>
263                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
264                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
265                                         &nbsp;&nbsp;&nbsp;
266                                         验证码
267                                     </td>
268                                     <td>
269                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<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                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
276                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
277                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
278                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
279                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
280                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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标签的用法（见代码中），还有验证成功后执行的回调函数的用法（一般是固定的，使用时直接复制粘贴）；

 

posted on 2018-02-21 22:59  limuma  阅读(278)  评论(0)  编辑  收藏  举报