前端編程提高之旅（十）----表單驗證插件與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。