前端编程提高之旅（十）—-表单验证插件与cookie插件
最后更新于：2022-04-01 09:37:10
实际项目开发中与用户交互的常见手法就是采用表单的形式，取得用户注册、登录等信息。而当用户注册或登录后又需要记住用户的登录状态。这就涉及到常用的两个操作：表单验证与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。**