目录

上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以有效的提高用户体验。在此之前,我们首先要了解表单的组成部分。表单大致有3个部分组成。

第一部分由表单标签组成,包含url及所提交的方法。即我们通常写到的<form action=”#” method=”post”>当然提交方法也可以是get,他们之间的区别再次就不做讨论。

第二部分由表单域组成:包含文本框、密码框、隐藏域、多行文本框、复选框等等。

第三部分由表单按钮组成:包含提交按钮、复位按钮、一般按钮,用于控制将数据传送到服务器或者取消传送。

jQuery中对表单的操作主要是针对于第二部分,即对表单域的操作,例如对文本框、密码框、隐藏域的操作等等。首先我们先来看一个jQuery对表单的一个最简单的应用。

一. 单行文本框的应用

此处,我们首先来看HTML代码。

<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">
名称:</label>
<input id="username" type="text" value="admin" />
</div>
<div>
<label for="password">
密码:</label>
<input type="password" id="password" value="123456" />
</div>
<div>
<label for="msg">
详细信息:</label>
<textarea rows="3" cols="15">详细信息</textarea>
</div>
</fieldset>
</form>

初始化HTML代码后,如图1所示

我们所需要做的效果就是当光标移入文本框的时候,会出现阴影,表示此时正在操作的正是此行的文本框,效果就如图2所示。

那么应该如何达到这个效果呢?其实非常简单,就是为文本框添加两个事件:focus与blur事件。具体jQuery代码如下所示。

<script type="text/javascript">
$(function () { //加载DOM
$(":input").focus(function () { //选中所有input标签,为其添加focus事件,即当光标移入所选区域内所触发的事件
$(this).addClass("focus"); //此处为其添加样式"focus”,注意我的样式写到了样式表中,此处未列出,样式即加背景与边框
}).blur(function () { //此处添加blur事件
$(this).removeClass("focus"); //移除样式
});
});
</script>

此时便完成了我们预定的目标。

二. 表单验证

在各大网站中,jQuery应用最广泛的一种恐怕就是表单验证了吧。无论是我们在申请或者填写登录信息的时候,或多或少都会用到表单验证。我们在这里就好好说说表单验证!可能很多人都会用插件来用于表单验证,我们在这里首先自己写一种表单验证,然后我们再通过插件再来写一次表单验证,便于理解。

还是老样子,我们首先来看HTML代码。

<form action="" method="post">
<div>
<div class="int">
<label for="username">
用户名:</label>
<input type="text" name="username" class="required" id="username" />
</div>
<div class="int">
<label for="email">
邮箱:</label>
<input type="text" name="email" class="required" id="email" />
</div>
<div class="int">
<label for="personmsg">
个人资料</label>
<input type="text" name="personmsg" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" /><input type="reset" id="res" value="重置" />
</div>
</div>
</form>

我们再为其添加css样式后,此处不列出css样式,使其显示如图3所示。

我们的目标效果是:1. 用户名及邮箱为必填项,如果没有填写,提示用户填写。

2.对用户名及邮箱进行有效性验证,要求用户名至少为6位,当用户输入小于6位时,则会提示用户“请输入至少6位用户名”,邮箱中必须复合邮箱规范。

我们先整理下思路:1. 首先我们寻找表单中的必填文本框,即class=”required“的文本框,为其添加样式”*“。

2. 针对用户名及密码的文本框,我们进行有效性判断,这里我们以用户名的文本框为例进行分析,当光标离开文本框的时候应触发blur事件,此时开始判断用户所输入内容的有效性,我们在这里假定用户名至少为6位,通过判断文本框的值的长度来返回不同的信息,如果用户输入内容为空或者字符小于6位,则返回一个错误消息提示用户输入必须至少6位,需要注意的是,我们在返回消息时候可以为其添加样式,当然样式最好定义在css中(样式中最好带有图片),如图4所示。如果输入长度大于等于6位,我们则返回正确信息,并为其添加好样式,如图5所示。同理,也为邮箱进行有效性判断,不过这里值得注意的是,邮箱是通过正则表达式进行判断的。

3. 好了,大致这些就进行的可以了,但是,如何能更好的提高用户体验呢?那就是我们希望,用户在焦点引入文本框的时候就能够进行提示,并且每键入一个字符的时候,就可以再次进行有效性验证!那么就在上面的基础上在为文本框添加两个事件focus与keyup事件,此时我们直接在这两个事件中添写triggerHandler(“blur”)就可以,此处一定要写triggerHandler,而不能是trigger,如果写trigger的话,则不但会激活我们写的blur事件,同时也会激活其自带的鼠标blur事件,而triggerHandler则可以将系统默认鼠标blur事件关闭。

4. 当然,最后我们也应该为两个按钮添加click事件。那么我们就来具体看看代码吧。

<script type="text/javascript">
$(function () { //加载DOM
//遍历class="required"的元素,即必填元素,并为其添加*
$("input.required").each(function () {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//为表单添加失去焦点的事件
$("form :input").blur(function () {
$(this).parent().find(".formtips").remove();
if ($(this).is("#username")) { //验证用户名
if (this.value == "" || this.value.length < 6) {
var errorMsg = "请输入至少6位用户名";
$(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>");
} else {
var okMsg = "输入正确";
$(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>");
}
}
if ($(this).is("#email")) { //验证邮箱
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = "请输入正确的邮箱地址";
$(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>");
} else {
var okMsg = "输入正确";
$(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>");
}
}
}).keyup(function () {
$(this).triggerHandler("blur");
}).focus(function () {
$(this).triggerHandler("blur");
});
//提交,通过判断返回的Error的次数来判断是否可以提交
$("#send").click(function () {
$("input.required").trigger("blur");
var numError = $("form .onError").length;
if (numError) {
return false;
}
alert("success!");
});
//重置
$("#res").click(function () {
$(".formtips").remove();
});
})
</script>

看了这一大推代码后,肯定心中会产生个想法,有没有在jQuery的基础上封装好的一种插件使我们可以通过引用插件对表单进行验证,从而可以高效率的开发呢?答案当然是肯定的,在http://www.plugins.jquery.com中我们可以找到一款名为validation的插件。在此,我们用插件重新开发一次!

HTML代码如以先前HTML代码类似,我们具体来看jQuery代码。

<script type="text/javascript">
$(document).ready(function () {
$("#infoForm").validate({ //验证的是id="infoForm"的表格
rules: { //定义验证规则rules
username: { //对用户名的验证规则
required: true,
minlength: 6
},
email: { //对email的验证规则
required: true,
email:true
}
},
messages: { //返回的验证信息
username: {
required: "请输入用户名",
minlength: "请至少输入6个字符"
},
email: {
required: "请输入邮箱",
email: "请检查所输入的邮箱格式"
}
}
});
})
</script>

用插件来写jQuery,相对而言更好写,这里需要注意的是validate中的与form的验证是通过<input>的name属性进行关联验证的,如用户名的验证,通过写好username验证。

就先写到这里吧,利用好jQuery中对表单的验证,可以有效提高用户的体验!

jQuery学习笔记(五)jQuery中的表单的更多相关文章

  1. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. Django学习笔记(6)——Form表单

    知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...

  5. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  6. jquery学习笔记(五):AJAX

    内容来自[汇智网]jquery学习课程 5.1 ajax AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. AJAX = 异步 JavaScript 和 XML ...

  7. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  8. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  9. jQuery整理笔记七----几个经典表单应用

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

  10. [原创]java WEB学习笔记73:Struts2 学习之路-- strut2中防止表单重复提交

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. IT行业常谈的优雅

    起因 前几天在群里和以前一起在成都培训的同学谈论到了求职, 有一位朋友说他在某家外包公司试用失败了, 然后我说了句:不要去外包公司.即使工资高一点. 其实说的时候也没考虑到他本人的处境, 毕竟还房贷资 ...

  2. C#异步方法的使用

    from:http://www.myext.cn/csharp/a_6765.html 也许业内很多高不成低不就的程序员都会对一些知识点会有些迷惑,原因是平常工作用的少,所以也就决定了你对这个事物的了 ...

  3. iPhone CSS media query(媒体查询)

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  4. 基于spring的aop实现读写分离与事务配置

    项目开发中经常会遇到读写分离等多数据源配置的需求,在Java项目中可以通过Spring AOP来实现多数据源的切换. 一.Spring事务开启流程 Spring中通常通过@Transactional来 ...

  5. SourceTree如何连接ssh的仓库地址,这里记录的是客户端需要做的事

    1. 2. 打开命令行以后输入ssh-keygen -t rsa -C "example@example.com"',这个地方输入的是你注册gitlab所使用的邮箱.按回车,之后还 ...

  6. 学习IO流

    学习IO流,不得不提到的就是JavaIO流.流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接受端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由得控制文件, ...

  7. ListView遍历每个Item出现NullPointerException的异常

    在使用ListView过程中我们有时候需要遍历取得每个Item项中的一些数据(比如每个Item里面有TextView,需要获取它的文本等等),但是我们在遍历过程中经常会遇到NullPointerExc ...

  8. tp

    ThinkPHP php框架 真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分 ...

  9. iOS第三方库管理工具

    作者:彷徨iOS 原文地址1:http://iostree.sinaapp.com/?p=78 原文地址2:http://blog.csdn.net/wzzvictory/article/detail ...

  10. Djunit工作记录Mock时出现为null的情况setReturnValueAt|MockObjectManager.addReturnValue不起作用

    最近工作要对代码进行局部测试并编写测试文档,可是偶的环境还没搞好哦(开始不太乐意直接请教前辈,还是选择自己先搞一下了)经过电脑重装jdk ,eclipse,djunit工具包ver***,等等确定不是 ...