jQuery應用實例5：表單驗證
阿新 • • 發佈：2018-01-30
ati itl www. type har 郵箱 size margin 錯誤提示 
1.validation插件的使用：
入門案例：
<html> <head> <meta charset="UTF-8"> <title>validate入門案例</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <!--validate.js是建立在jquery之上的，所以得先導入jquery的類庫--> <scriptView Codetype="text/javascript" src="js/jquery.validate.min.js"></script> <!--引入國際化js文件--> <script type="text/javascript" src="js/messages_zh.js"></script> <script> $(function() { $("#checkForm").validate({ rules: { username: { required:true, minlength: 6 }, password: { required: true, digits: true, minlength: 6 } }, messages: { username: { required:"用戶名不能為空!", minlength: "用戶名不得少於6位！" }, password: { required: "密碼不能為空!", digits: "密碼必須是數字!", minlength: "密碼不得少於6位!" } } }); }); </script> </head> <body> <form action="#" id="checkForm"> 用戶名：<input type="text" name="username" /><br /> 密碼：<input type="password" name="password" /><br /> <input type="submit" /> </form> </body> </html>
註意：這裏需要導入三個js文件
效果：
接下來就是表單驗證：
這裏是用js實現的：http://www.cnblogs.com/xuyiqing/p/8372726.html
現在用jQuery實現：
效果：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.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: 3 }, password: { required: true, digits: true, minlength: 6 }, repassword: { required: true, equalTo: "[name=‘password‘]" }, email: { required: true, email: true }, username: { required: true, maxlength: 5 }, sex: { required: true } }, messages: { user: { required: "用戶名不能為空!", minlength: "用戶名不得少於3位!" }, password: { required: "密碼不能為空!", digits: "密碼必須是整數!", minlength: "密碼不得少於6位!" }, repassword: { required: "確認密碼不能為空!", equalTo: "兩次輸入密碼不一致!" }, email: { required: "郵箱不能為空!", email: "郵箱格式不正確!" }, username: { required: "姓名不能為空!", maxlength: "姓名不得多於5位!" }, sex: { required: "性別必須勾選!" } }, errorElement: "label", //用來創建錯誤提示信息標簽,validate插件默認的就是label success: function(label) { //驗證成功後的執行的回調函數 //label指向上面那個錯誤提示信息標簽label label.text(" ") //清空錯誤提示消息 .addClass("success"); //加上自定義的success類 } }); }); </script> <style> label.error{ background:url(img/unchecked.gif) no-repeat 10px 3px; padding-left: 30px; font-family:georgia; font-size: 15px; font-style: normal; color: red; } label.success{ background:url(img/checked.gif) no-repeat 10px 3px; padding-left: 30px; } </style> </head> <body> <div> <form action="#" method="get" id="registForm"> <div id="father"> <div id="form2"> <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr> <td colspan="2"> <font size="5">會員註冊</font> USER REGISTER </td> </tr> <tr> <td width="180px"> <label for="user">用戶名</label> </td> <td> <em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user" /> </td> </tr> <tr> <td> 密碼 </td> <td> <em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" /> </td> </tr> <tr> <td> 確認密碼 </td> <td> <em style="color: red;">*</em> <input type="password" name="repassword" size="35px" /> </td> </tr> <tr> <td> Email </td> <td> <em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email" /> </td> </tr> <tr> <td> 姓名 </td> <td> <em style="color: red;">*</em> <input type="text" name="username" size="35px" /> </td> </tr> <tr> <td> 性別 </td> <td> <span style="margin-right: 155px;"> <em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女<em></em> <label for="sex" style="display: none;"></label> </span> </td> </tr> <tr> <td> 出生日期 </td> <td> <em style="color: red;">*</em> <input type="text" name="birthday" size="35px" /> </td> </tr> <tr> <td> 驗證碼 </td> <td> <em style="color: red;">*</em> <input type="text" name="yanzhengma" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註 冊" height="50px" /> </td> </tr> </table> </div> </div> </form> </div> </body> </html>View Code
jQuery應用實例5：表單驗證