前端编程提高之旅(十)----表单验证插件与cookie插件
来源:互联网 发布:淘宝直通车竞价 编辑:程序博客网 时间:2024/05/16 01:54
实际项目开发中与用户交互的常见手法就是采用表单的形式,取得用户注册、登录等信息。而当用户注册或登录后又需要记住用户的登录状态。这就涉及到常用的两个操作:表单验证与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。
0 0
- 前端编程提高之旅(十)----表单验证插件与cookie插件
- 前端编程提高之旅(一)----插件
- 前端表单验证插件
- jquery (validate验证插件、form表单插件、cookie插件)
- jquery (validate验证插件、form表单插件、cookie插件)
- web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)
- 【前端插件】表单验证(结果绑定按钮可用状态)
- jquery插件之表单验证插件
- jquery之表单验证插件
- jquery validate插件前端表单验证插件的使用
- jquery UI学习笔记-知问前端之验证表单插件
- 1.jQuery插件Validation(表单验证)之基础入门
- jQuery学习之:Validation表单验证插件
- jQuery学习之:Validation表单验证插件
- jQuery插件之validate表单验证
- jQuery学习之:Validation表单验证插件
- 表单验证插件之jquery.validate.js
- 基于Jquery的表单验证插件与日历插件
- 解决Ice 对象大数据量传输Bug
- 不更新不行:Win10今年最后一个预览版
- PV、UV、IP都代表什么
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- 基于cocos2d-x 3.2 的时间获取函数
- 前端编程提高之旅(十)----表单验证插件与cookie插件
- 缓存DNS服务器和主DNS服务器的快速搭建详解
- 如何在代码里打开Android手机通知状态栏
- ubuntu下安装ns2详细步骤
- 获取android唯一ID 的坑
- 软件架构————防御式编程
- HQL条件查询
- vi中跳到文件的第一行和最后一行
- 航班查询接口