使用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>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> 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標簽的用法（見代碼中），還有驗證成功後執行的回調函數的用法（一般是固定的，使用時直接複製粘貼）；
