目录

上次我们说完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. oracle数据库之数组的操作样例

    1.创建bean对象 --创建bean对象 CREATE OR REPLACE TYPE "FM_FLOWCPHDTSWJJIMPBEAN" as object ( wf_no ) ...

  2. 自动更新补丁Security Update for Internet Explorer 10 for Windows Server 2008 R2 x64 Edition (KB2964358)失败

    下载http://www.microsoft.com/zh-CN/download/details.aspx?id=42581手动安装成功.

  3. wp8.1 页面返回 页面导航

    public The_second() public second() { this.InitializeComponent(); Frame frame = Window.Current.Conte ...

  4. 用Merge来改写相关更新的例子

    下面的两个SQL是等价的,但是一个执行N小时都执行不完,一个花了一分钟. 执行计划显示第一个语句是由外面的即将被更新的表驱动内层,相对于是一个NEST LOOP,cost非常大.第二个语句是内层单独执 ...

  5. EasyUI树和Ztree树冲突问题

    1.今天做项目的时候出现了如下的错误. 报错:TypeError: $(...).tree is not a function 代码如下: 这是EasyUI的页面部分 $(function(){ $( ...

  6. E-Business Suite 12.2 startCD 50 Install Fails with Fatal Error: TXK Install Service oracle.apps.fnd.txk.config.ProcessStateException: OUI process failed Cannot install Web Tier Utilities

    在rhel7.2上,使用startCD 50安装ebs r12.2的使用,安装到38%的时候就报错,遇到了和以下文章类似的问题: http://www.cnblogs.com/abclife/p/49 ...

  7. 编写第一个MapReduce程序—— 统计气温

    摘要:hadoop安装完成后,像学习其他语言一样,要开始写一个“hello world!” ,看了一些学习资料,模仿写了个程序.对于一个C#程序员来说,写个java程序,并调用hadoop的包,并跑在 ...

  8. linux-----------linux查看并发数

    1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a ...

  9. Infinite V2 Release Note

    游戏地址 PLAY 玩法说明 - WASD 控制角色移动 - 按下J键 进入攻击模式(WASD 可以继续移动) 更新内容 - 完成角色锁定目标后边移动边攻击 开发心得 状态机的设计 最初的设计很乱, ...

  10. Eclipse的安装与调试

    1.首先进入eclipse官网下载eclipse 2.根据自己的系统选择相应版本进行下载.由于我的是64bit,所以我选择64bit版下载. 3.点开下载的程序,进行安装. 4.随后进入了安装页面.和 ...