前端编程提高之旅(十)----表单验证插件与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" >

返回值。

例如以下图:

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

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" >

选中单选框

数据存入cookie

取消单选框



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

cookie清空

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

时间: 2024-08-24 19:44:13

前端编程提高之旅(十)----表单验证插件与cookie插件的相关文章

前端编程提高之旅(二)----网站常见特效的jquery实现

最好的编程语言是逻辑,前端各种交互特效的实现多可以用jquery实现,特效可以纷飞,内在逻辑则基本不变.这一篇文章主要介绍jquery实现常见特效背后的逻辑.    1.通过类名获取元素集合    首先来看一个js原生代码不支持的方法,通过类来获取元素集合. document.getElementsByClassName=function(classname){ var retnode = []; var myclass = new RegExp('\\b'+classname+'\\b');/

前端编程提高之旅(三)----浏览器兼容之IE6

在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,由于移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙,一开始就比较好的支持web标准,而纵观整个互联网行业,移动web开发还处于起步阶段,在很长一段时间pc端web作为主要的服务形式还会继续.从小来说作为一名前端开发人员,不了解浏览器兼容也会贻笑大方.这篇文章基于<IE7web标准之道>,对浏览器兼容做一个概览.    时间到了2014年,大概很少人会想到IE7发布之后,时隔这么多年IE6仍然占据市场7%的浏览器份

表单验证的validate.js插件---jQuery Validation Plugin

早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面,插件全名叫jquery.validate.js,在引入jquery.validate.js之前要先将jquery.js引入.这个插件主要用于表单的验证,用户在注册和登录时体验十分不错!由于自己只了解关于validate的皮毛,只会简单的应用rule规则和message自定义提示,事实上,validate还有其

前端编程提高之旅(十七)----jquery中表单、表格和ajax

从一个框架核心功能层面上说,实现了选择器.DOM操作.事件.动画,功能已经完备了.而任何框架写出了就是应用的,所以这篇涉及的表单与表格知识,虽在DOM操作中有所涉及,但更偏于实际项目中的应用技巧的使用.ajax部分的内容更是前端与后端交互的核心.    一.jQuery中的表单与表格应用    实际项目中,表单和表格分别扮演采集.提交用户输入的信息和显示列表的数据.在HTML中非常重要.下面是这部分知识导图:    1.表单    (1)单行文本框     单行文本框职能是获取用户输入的指定格式

前端编程提高之旅(十八)----移动端web流行交互技术方案研究

   在停止实习后,生活最大变化在于没有项目的压力,可以根据兴趣场景,探索技术实现.这个过程对于个人来说,动力自内而外,需求自上而下,都由个人把握.    生活在移动互联网井喷的今天,同时又关注前端技术,平常对微信端流行的交互(或者说玩法)有着特殊的敏感性.如果说之前接触MVC框架还是对单页面网站.CSS3前沿特效有一个概念的话,微信朋友圈及好友分享网页,则把国内网页构建的流行趋势,从幕后推向前台.    乐帝通过研究移动端web流行交互,构建起了一个初步可行的技术方案,用来实现单页面与DOM动

前端编程提高之旅(五)----写给大家看的css书

   自实习也有几个月的时间了,以爱奇艺实习为敲门砖,进入了目前这家公司.如果说当初能进爱奇艺是临时突击DIV+CSS的话,目前在这家公司体验到,任何技术都必须悉知原理,这样才能做到庖丁解牛,做一个内行的人.css属性和用法都摆在那里,但如果用得好,除了躬身实践,提高理论积淀就特别必要了,这本<写给大家看的css书>快速扫过一遍之后,之前工作遇到过不清楚的问题,一扫而空,所以有必要总结下.    css层叠的理解    css是层叠样式表的英文缩写,层叠意味着样式从文档结构中一个层次传递到另一

前端编程提高之旅(十五)----jquery事件

HTML与js交互主要通过用户与浏览器操作页面时引发事件.文档或某些元素发生某些变化或操作时,浏览器会生成事件.jquery增加了事件处理能力.    jquery事件部分可以从以下五部分理解:    一.加载DOM函数    这里指的如下方法: $(document).ready(function(){ }) 相比于传统的window.onload方法,前者在执行时机与可否多次使用上区别于后者.    前者是在DOM完全就绪回调就会被调用,后者则是网页所有元素(包含关联文件)完全加载到浏览器后

前端编程提高之旅(十六)————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

前端编程提高之旅(十二)----position置入值应用

这次内推项目用到的遮罩及其页面下方按钮都涉及一个概念position置入值得概念.效果图如下: 一个元素position属性不是默认值static,那么该元素被称为定位元素.定位的元素生成定位框,其定位基于四个特性(置入值):'top','right','bottom','left'. 现在的问题在于当置入值在声明与否起什么作用.    一.声明置入值得情形    其置入值的参照物即为最近的申明了"position"为"absolute\relative\fixed的祖先元素