前端编程提高之旅（十）----表单验证插件与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返回值情况。例如以下图：

       此方法可用于表单是否提交，验证条件。

      当表单正常填写时，例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

         返回值。

例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

         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插件使用方法很easy。

  引入插件文件后，构建下面结构：

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

页面通过一个单选button选中与否记录cookie的存储于删除。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

选中单选框

数据存入cookie

取消单选框

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

cookie清空

            这里须要注意的是，cookie清空可採用两种方法，一种是移除$.removeCookie('name')。一种是本文方法将cookie对应值设置成null。