jquery.validation.js在前端驗證中使用起來非常方便,提供的功能基本上能滿足大部分驗證需求，下面我們就來仔細研究下這款jQuery插件的具體使用方法。
在網站開發過程中，有時我們需要驗證用戶輸入的信息是否符合我們的要求，所以我們會對用戶提交的數據進行驗證。驗證分兩次進行，一次是在客戶端，一次是在服務端。客戶端的驗證可以提升用戶的體驗。
jquery驗證插件有很多，實現的功能也基本相同。本文介紹的只是jquery驗證插件中的一種jquery.validate
jquery.Validation是一款優秀的jquery插件,它能對客戶端表單進行驗證,並且提供了許多可以定制的屬性和方法,良好的擴展性。
1.jquery.validate插件功能
簡單實現客戶端信息驗證，過濾不符合要求的信息
2.jquery.validate官方地址
官方地址：http://jqueryvalidation.org/,有詳細的插件使用說明
官方demo：http://jquery.bassistance.de/validate/demo/
3.jquery.validate使用方法
1.引用js
?
1 2 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>2.css樣式，可自定義，簡單的只需要添加error樣式，也可使用官方demo中的樣式。
?
1 2 3 4 .error{ color:red; margin-left:8px; }3.js代碼
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#signupform").validate({ rules: { firstname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, password_confirm: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true, }, dateformat: "required", terms: "required" }, messages: { firstname: "姓名不能為空", username: { required: "用戶名不能為空", minlength: jQuery.format("用戶名只少由 {0} 字符組成") }, password: { required: "密碼不能為空", minlength: jQuery.format("密碼只少由 {0} 字符組成") }, password_confirm: { required: "確認密碼不能為空", minlength: jQuery.format("確認密碼只少由 {0} 字符組成"), equalTo: "秘密與確認密碼不一致" }, email: { required: "郵箱不能為空", email: "郵箱格式不正確" }, dateformat: "請選擇性別", terms: " " }, // the errorPlacement has to take the table layout into account errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo( element.parent().next().next()); else if ( element.is(":checkbox") ) error.appendTo ( element.next()); else error.appendTo( element.parent().next()); }, // specifying a submitHandler prevents the default submit, good for the demo submitHandler: function() { alert("submitted!"); }, // set this class to error-labels to indicate valid fields success: function(label) { // set as text for IE label.html(" ").addClass("checked"); }, highlight: function(element, errorClass) { $(element).parent().next().find("." + errorClass).removeClass("checked"); } }); });以上的代碼只使用了插件提供的屬性和方法。也可以自定義驗證方法。如
?
1 2 3 4 5 6 7 $.validator.addMethod("checkUserName", function(value) { //value為驗證的值，對應於元素id //方法代碼 }, '用戶名格式不正確');使用自定義方法也非常簡單，只需要 元素id:”checkUserName”
4.使用的html
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <form id="signupform" autocomplete="off" method="get" action=""> <table> <tr> <td class="label"><label id="lfirstname" for="firstname">姓名</label></td> <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td> <td class="status"></td> </tr> <tr> <td class="label"><label id="lusername" for="username">用戶名</label></td> <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td> <td class="status"></td> </tr> <tr> <td class="label"><label id="lpassword" for="password">密碼</label></td> <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td> <td class="status"></td> </tr> <tr> <td class="label"><label id="lpassword_confirm" for="password_confirm">確認密碼</label></td> <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td> <td class="status"></td> </tr> <tr> <td class="label"><label id="lemail" for="email">郵箱</label></td> <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td> <td class="status"></td> </tr> <tr> <td class="label"><label>性別</label></td> <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;"> <table> <tbody> <tr> <td style="padding-right: 5px;"> <input id="sex_men" name="dateformat" type="radio" value="0" /> <label id="lbl_sex_men" for="dateformat_eu">男</label> </td> <td style="padding-left: 5px;"> <input id="sex_women" name="dateformat" type="radio" value="1" /> <label id="lbl_sex_women" for="dateformat_am">女</label> </td> <td> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="label"> </td> <td class="field" colspan="2"> <div id="termswrap"> <input id="terms" type="checkbox" name="terms" /> <label id="lterms" for="terms">以閱讀並同意網站條款.</label> </div> <!-- /termswrap --> </td> </tr> <tr> <td class="label"></td> <td class="field" colspan="2"> <input id="signupsubmit" name="signup" type="submit" value="注冊" /> </td> </tr> </table> </form>