實際項目開發中與用戶交互的常見手法就是採用表單的形式。取得用戶註冊、登錄等信息。而當用戶註冊或登錄後又須要記住用戶的登錄狀態。這就涉及到經常使用的兩個操作：表單驗證與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: "評論不能為空"
    }
	  });

jQuery.validator.addMethod("isMobile", function(value, element){
                var length = value.length;
                return  length == 11 && /^[1][3-8]\d{9}$/.test(value);
            }, "請填寫正確的手機號碼");

mobile: {
        required: true,
        isMobile:true
      }

 用戶名：<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