前端編程提高之旅（十）----表單驗證外掛程式與cookie外掛程式，----cookie

前端編程提高之旅（十）----表單驗證外掛程式與cookie外掛程式，----cookie

    實際項目開發中與使用者互動的常見手法就是採用表單的形式，取得使用者註冊、登入等資訊。而當使用者註冊或登入後又需要記住使用者的登入狀態。這就涉及到常用的兩個操作：表單驗證與cookie增刪尋找。

    項目開發當然可以手動或用原生代碼解決以上兩個問題，而最好的實踐應該是站在巨人的肩膀上，從合理性推測角度和不重複造輪子的原則上，都應該對成熟的技術，實行拿來主義，更加快速、高效、穩定的將精力放在項目邏輯實現上。

   一、表單驗證外掛程式（jQuery Validate）

   官方描述：只需要一行來選擇表單並且應用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外掛程式官網文檔中，不難發現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。