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 相关文章推荐
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
一分钟理解js闭包
May 04 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
ECMAScript6--解构
Mar 30 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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异步执行的详解
2013/06/03 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python使用cookielib库示例分享
2014/03/03 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python-地图可视化组件folium的操作
2020/12/14 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
装修施工安全责任书
2014/07/24 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
小学总务工作总结
2015/08/13 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书