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 Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中处理XML的教程
2015/04/29 Python
python os用法总结
2018/06/08 Python
将python图片转为二进制文本的实例
2019/01/24 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
UML设计模式笔试题
2014/06/07 面试题
自荐书模板
2013/12/15 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
财务会计专业求职信
2014/06/09 职场文书
公民授权委托书
2014/10/15 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL