實際項目開發中與用戶交互的常見手法就是采用表單的形式，取得用戶注冊、登錄等信息。而當用戶注冊或登錄后又需要記住用戶的登錄狀態。這就涉及到常用的兩個操作：表單驗證與cookie增刪查找。 項目開發當然可以手動或用原生代碼解決以上兩個問題，而最好的實踐應該是站在巨人的肩膀上，從合理性推測角度和不重復造輪子的原則上，都應該對成熟的技術，實行拿來主義，更加快速、高效、穩定的將精力放在項目邏輯實現上。 **一、表單驗證插件（[jQuery Validate](http://jqueryvalidation.org/)）** **官方描述：只需要一行來選擇表單并且應用validation插件，在每個元素上加上一些附注來指定有效規則。** **jQuery Validate可以將驗證規則寫到表單的內部表單項中，但這樣并沒有實現行為與結構的分離，可讀性不好，耦合性高。一般會采用name屬性來關聯字段和驗證規則的驗證寫法。** **首先我們來創建表單：** ~~~ <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>一個簡單的驗證帶驗證提示的評論例子</legend> <p> <label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" /> </p> <p> <label for="cemail">電子郵件</label> <em>*</em><input id="cemail" name="email" size="11" /> </p> <p> <label for="mobile">手機</label> <em>*</em><input id="cmobile" name="mobile" size="25" /> </p> <p> <label for="curl">網址</label> <em> </em><input id="curl" name="url" size="25" value="" /> </p> <p> <label for="ccomment">你的評論</label> <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> ~~~ **** **表單結構** **引入驗證插件后，驗證規則的代碼：** ~~~ $("#commentForm").validate({ // 驗證規則 rules: { mobile: { required: true, isMobile:true }, username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:"url", comment: "required" }, // 提示信息 messages:{ mobile: { required: "手機號不能為空", minlength: "手機號至少為11位" }, username:{ required:"用戶名不能為空", minlength: "用戶名至少為兩位" }, email: { required: "郵箱不能為空", email: "請輸入正確郵箱格式" }, url:"請輸入正確url格式", comment: "評論不能為空" } }); ~~~ **$("#commentForm").validate()，這句代碼算是jquery插件標準用法，選擇器選中dom節點構造成jquery對象，在這個對象上調用插件功能函數。** **在validate方法內包含兩部分數據：一部分是驗證規則“rules”，一部分是驗證提示信息“messages”。兩部分信息內部，又根據表單中表單項name屬性關聯具體驗證規則。** **** **如上填寫表單提交時，提示信息** **表單是否可以提交，可以用valid函數判斷，如上情況valid返回值情況，如下圖：** **** **此方法可用于表單是否提交，驗證條件。** **當表單正常填寫時，如下圖：**  **返回值。如下圖：**  **jQuery Validate還允許用戶自定義驗證規則，本例中樂帝重新定義了一個手機號驗證規則：** ~~~ jQuery.validator.addMethod("isMobile", function(value, element){ var length = value.length; return length == 11 && /^[1][3-8]\d{9}$/.test(value); }, "請填寫正確的手機號碼"); ~~~ **驗證規則寫法addMethod包含三部分：驗證規則名，驗證函數、驗證返回信息。** **驗證規則調用：** ~~~ mobile: { required: true, isMobile:true } ~~~ **二、cookie插件的使用** **在[cookie插件官網](https://github.com/carhartl/jquery-cookie#readme)文檔中，不難發現cookie插件用法非常簡單。** **引入插件文件后，構建以下結構：** ~~~ 用戶名：<input type="text" name="username" id="username"/> <br/> <input type="checkbox" name="check" id="check"/>記住用戶名 ~~~ **相應腳本：** ~~~ var COOKIE_NAME = 'username'; if( $.cookie(COOKIE_NAME) ){//取出cookie值 $("#username").val( $.cookie(COOKIE_NAME) ); } $("#check").click(function(){ if(this.checked){ $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 }); }else{ $.cookie(COOKIE_NAME, null, { path: '/' });//刪除cookie值，將值設為null即可 } });//通過記錄是否點選單選鈕，是否將數據存入cookie ~~~ **頁面通過一個單選按鈕選中與否記錄cookie的存儲于刪除。**  **選中單選框**  數據存入cookie  **取消單選框**  **cookie清空** **這里需要注意的是，cookie清空可采用兩種方法，一種是移除$.removeCookie('name')，一種是本文方法將cookie相應值設置成null。**