jquery中dom操作和事件的实例学习-表单验证


Posted in Javascript onNovember 30, 2011

很显然,这样做能提升更好的用户体验。
html代码:

<form method="post" action=""> 
<div class="int"> 
<label for="username">用户名:</label> 
<input type="text" id="username" class="required"/> 
</div></form>

jquery代码:
<script type="text/javascript"> 
$(function(){ 
$('form :input').blur(function(){ 
var $parent=$(this).parent(); 
$parent.find(".formtips").remove(); 
if($(this).is('#username')) { 
if(this.value==""||this.value.length<6){ 
var msg="<span class='formtips error'>请输入至少6位用户名</span>"; 
$(msg).appendTo($parent); 
}else{ 
var msg="<span class='formtips success'>输入正确</span>"; 
$(msg).appendTo($parent); 
} 
} 
}).keyup(function(){ 
$(this).triggerHandler("blur"); 
}).focus(function(){ 
$(this).triggerHandler("blur"); 
}) 
}) 
</script>

好,现在来详细分析下里面的jquery语句。
先看dom操作的语句
$('form:input') 这个是用来查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
类似的还有$(':text'),$(':checkbox')等。反正只要明白只有在表单内,通过表单选择器都能得到相应的元素。
parent()是找到匹配元素的父节点。find()是来搜索与表达式匹配的元素。remove()是用来删除元素。
is()是用一个表达式来检查当前选择器的元素集合,如果存在至少一个匹配元素,则返回 true。
appendTo()是把一个元素添加到令一个元素中
triggerHandler()这一个特点方法会触发元素上的特定事件。
再看事件的语句。
keyup()是按键向上时触发。
理解每个方法后应该不难理解上面的代码
可能对于这句代码有疑问。 $parent.find(".formtips").remove();
这句是为了保证后面提示的元素只有一个。如果没有这句,就会一直添加提示的元素。
Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 #Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 #Javascript
基于jquery的拖动布局插件
Nov 25 #Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
JQuery1.6 使用方法三
Nov 23 #Javascript
jQuery1.6 使用方法二
Nov 23 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python实现图片批量压缩程序
2018/07/23 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python理解递归的方法总结
2019/01/28 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
就业协议书怎么填
2014/04/11 职场文书
医生见习报告范文
2014/11/03 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python图片检索之以图搜图
2021/05/31 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
如何通过一篇文章了解Python中的生成器
2022/04/02 Python