首页 > 代码库 > 前端编程提高之旅(十)----表单验证插件与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=http://www.mamicode.com/"" />>表单结构引入验证插件后,验证规则的代码:$("#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插件使用方法很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的存储于删除。选中单选框
数据存入cookie取消单选框cookie清空这里须要注意的是,cookie清空可採用两种方法,一种是移除$.removeCookie(‘name‘)。一种是本文方法将cookie对应值设置成null。
前端编程提高之旅(十)----表单验证插件与cookie插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。