用jquery实现简单的表单验证效果
来源:互联网 发布:淘宝美人药妆 许佳宁 编辑:程序博客网 时间:2024/06/04 18:31
看了《锋利的jquery》一书,练习了下期中的一个用jquery写表单验证的例子。
效果如图:
总结:
这是个比较简单的表单验证,主要验证了表单中的用户名和邮箱两个必填选项。表单验证其实质是个不断往下过滤的过程。
主要思路:
(1)判断当前失去焦点的元素是“用户名”还是“邮箱”,然后分别处理。
(2)如果是“用户名”,判断元素的值的长度是否为空或小于6,如果是,则用红色提醒用户输入不正确,反之,则用绿色提醒用户输入正确
(3)如果是“邮箱”,判断元素的值是否为空且是否符合邮箱的格式,如果不符合,则用红色提醒用户输入不正确,反之,则用绿色提醒用户输入正确。
(4)将提醒信息追加到当前元素的父元素的最后
再来具体分析下代码实现:
1。表单中必填字段后都有个红色的*号。这里用到jquery的each()方法对表单中的元素进行遍历。代码如下
// 如果是必填的,则增加红星标识$("form :input.required").each(function() {// 创建元素var $required=$("<strong class='high'>*</strong>");// 然后将它追加到文档中$(this).parent().append($required);});
2.当用户在“用户名”和“邮箱”文本框中填写完信息后,将光标的焦点从中移出时,需要即时判断“用户名”或“邮箱”是否输入正确,因此需要给表单元素添加失去焦点事件,即blur。代码如下:
$('form :input').blur(function(event) {})
3.需要注意的是,由于每次在元素失去焦点后,都会创建一个新的提醒元素,然后将它追加到文档中,最后就出现了多次的提醒信息。因此,在创建新的提醒元素之前,将当前提醒元素之前的提醒元素都删除,可以使用remove()的方法来实现,代码如下:
$('form :input').blur(function(event) { var $parent=$(this).parent(); $parent.find(".formtips").remove();})
4.如果用户无视错误提醒,执意要提交,为了使表单填写准确,在表单提交之前,需要对表单的必填元素进行一次整体性的验证,可以直接用trigger()方法来触发blur事件,从而达到验证效果。如果填写错误,就以红色提醒用户;如果用户名和邮箱都不符合规则,那就有2处错误,既有两个class为"onError"的元素,因此可根据class为“onError”元素额长度来判断是否可以提交、如果长度为0,即true,说明已经可以提交;如果长度大于0,即false,说明有错误,需要阻止表单提交。阻止表单提交可以直接用"return false"语句。代码如下:
//提交,最终验证$('#send').click(function(event) {$("form :input.required").trigger('blur');var numError=$('form .onError').length;if(numError){return false;}alert("注册成功,密码已发到你的邮箱,请查收.")});
5.额外增加的功能,即不需等元素失去焦点时,输入时就可以提醒用户。为此给表单绑定了keyup和focus事件,keyup事件能在每次用户松开按键时触发,实现即时提醒;focus事件能在元素得到焦点的时候触发,也可以实现即时提醒代码如下:
$('form :input').blur(function(event) { //代码省略}).keyup(funciton(){ $(this).triggerHandler('blur');}).focus(funciton(){$(this).triggerHandler('blur');})
这样当用户将光标定位到文本框上和改变文本框的值时,表单就会即时提醒用户填写是否正确。
这里要注意的是,trigger('blur')不仅会触发位元素绑定的blur事件,也会触发浏览器默认的blur事件,即不能讲光标定位到文本框上。而triggerHandler('blur')只会触发为元素绑定的blur事件,而不触发浏览器默认的blur事件。
留待解决的问题:
1.这里邮箱验证用了正则表达式
this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)
是否还有更严谨细致的写法有待研究
2.客户端的验证仅用于提升用户操作体验,而服务器端仍需对用户输入的数据的合法性进行校验,对于禁用了脚本的用户和用户自制的网页提交操作,必须在服务器端验证。
- 用jquery实现简单的表单验证效果
- 用jQuery实现简单的表单验证
- jquery实现简单的表单验证
- jquery实现简单的表单验证
- jQuery简单的表单验证
- jquery简单实现表单提交后的需要等待效果
- 天易21----jquery实现简单的表单验证
- 使用简单jQuery工具来实现表单的验证
- jQuery实现表单的验证
- jQuery实现表单的验证
- JQuery简单表单验证
- 简单易用的jquery表单验证-EasyValidator
- jquery验证表单很简单的方法
- jQuery 对表单的简单验证
- jQuery之简单的表单验证
- jQuery之简单的表单验证
- jQuery之简单的表单验证
- jQuery之简单的表单验证
- opencv读取视频(部分注释)
- Android按钮点击事件的绑定
- 解决ASP.NET MVC 检测到有潜在危险的 Request.Form 值
- Android ViewPager使用详解
- 基于动态规划的矩阵连乘最优方法
- 用jquery实现简单的表单验证效果
- MicroSoft Office 2007各版本解析
- 七天学会NodeJS-第二天
- log4j.properties
- c# 截图
- c 缓冲和文件
- ERROR 1130: Host '192.168.0.207' is not allowed to connect to this MySQL
- Solr入门
- C语言基础:C语言typedef(2) - typedef与宏定义的对比