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 中关于CSS操作部分使用说明
Jun 10 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php使用session二维数组实例
2014/11/06 PHP
php生成shtml类用法实例
2014/12/09 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python变量作用范围实例分析
2015/07/07 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python文件编写好后如何实践
2020/07/07 Python
详解python对象之间的交互
2020/09/29 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
后勤自我鉴定
2013/10/13 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
二年级上册数学教学计划
2015/01/20 职场文书