使用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 1300px; 10 margin: auto; 11 } 12 13 #top{ 14 border: 0px solid white; 15 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 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 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; 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标签的用法（见代码中），还有验证成功后执行的回调函数的用法（一般是固定的，使用时直接复制粘贴）；