jQuery笔记(五)jQuery表单验证
前言
上次我们说完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>
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表单验证的更多相关文章
- SpringBoot(五)_表单验证
SpringBoot(五)_表单验证 参数校验在我们日常开发中非常常见,最基本的校验有判断属性是否为空.长度是否符合要求等,在传统的开发模式中需要写一堆的 if else 来处理这些逻辑,很繁琐,效率 ...
- JQuery攻略(五)表单验证
表单验证,字段空白,输入合法,数据合法....... 此章节有 1.1字段验证 1.2正则表达式验证 1.3复选框的勾选 1.1字段验证 1.字段非空 $(document).ready(functi ...
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- jQuery实现用户注册的表单验证
用户注册的表单往往是需要进行验证的,否则会有一些不否合规则的数据入库,后果会不堪设想,本文通过jquery来实现. <html> <head> <meta chars ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- Yii学习笔记之四(表单验证 api 翻译)
1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数 yii\base\Model::validate() 进行验证 他会返回boolean值的 ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- 【代码笔记】Web-JavaScript-JavaScript表单验证
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Spring Boot笔记八:表单验证
所谓的表单验证,就是为了防止用户乱输入的,这个问题前端的HTML5就可以判断了,其实不需要后端来验证,这里还是讲一下后端验证 首先,我们的Person类,我们加上一些表单验证的注释,如下: packa ...
随机推荐
- js变量和函数提升
写在前面: 变量提升是 声明提升,初始化不会提升,比如说 var a=1; console.log(a); 实际是这样执行(个人理解,仅供参考) var a; console.log(a); a=1; ...
- C 语言宏定义函数编写时 do-while 的妙用和一些注意事项
在 C 语言中,我们都知道可以用宏定义来编写函数,一般称为宏函数.如果一个宏函数比较复杂,那么在编写这样的宏函数是有一定技巧和注意事项的.文章给出一些我认为值得关注的地方,以及一些注意事项(个人建议) ...
- springboot 日志 logback输出
1.首先在 application,yaml中添加 logging: config: classpath:logback-spring.xml 2.之后在resources中添加 logback-sp ...
- Spring——自动装配(@Autowired/@Profile/底层组件)
本文介绍Spring中关于自动装配的方法和规则,以及@Profile动态激活的用法和一个例子. 一.@Autowired自动装配 @Autowired注解可以加在构造器.属性.方法.方法参数上. 自动 ...
- python3安装pycrypto
这几天想用py3弄一个系统,需要用到WeChat-sdk这个包,在pip install wechat-sdk的时候报了一系列的错误,最后定位是安装pycrypto出错,各种度娘之后说要安装vs201 ...
- Jedis客户端即redis中的pipeline批量操作
关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...
- 使用Java, AppleScript对晓黑板进行自动打卡
使用Java, AppleScript对晓黑板进行自动打卡 由于我们学校要求每天7点起床打卡,但是实在做不到,遂写了这个脚本. 绪论 由于晓黑板不支持网页版,只能使用App进行打卡,所以我使用网易的安 ...
- SpringBoot图文教程7—SpringBoot拦截器的使用姿势这都有
有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...
- RT-Thread can - STM32F103ZET6
SDK版本v4.0.2 目前,RT-Thread Studio还不能够自定义添加can设备.下面介绍手动添加过程: 使用RT-Thread Studio创建一个简单工程 使用RT-Thread env ...
- oo第三次作业--jml
1.首先我们应该了解什么是jml,jml是java modeling language的缩写,是一种为java规格化设计的标识语言,简单来说,就是描述“干什么”的标准语言(跟注释差不多,但是是标准化注 ...