jquery中dom操作和事件的实例学习-表单验证
更新时间：2011年11月30日 19:40:38 作者：
这个demo的效果是实现用户输入时提供实时提醒，并不一定要等到元素失去焦点时才提醒
很显然，这样做能提升更好的用户体验。
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();
这句是为了保证后面提示的元素只有一个。如果没有这句，就会一直添加提示的元素。
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();
这句是为了保证后面提示的元素只有一个。如果没有这句，就会一直添加提示的元素。
相关文章
基于jquery的图片幻灯展示源码，需要的朋友可以参考下2012-07-07
这篇文章主要介绍了JQuery使用数组遍历跳出each循环,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
jquery $.trim()去除字符串空格的实现方法【附图例】
下面小编就为大家带来一篇jquery $.trim()去除字符串空格的实现方法【附图例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
下面小编就为大家带来一篇jq给页面添加覆盖层遮罩的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家详细介绍了jquery实现上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery EasyUI中的日期控件DateBox修改方法
下面小编就为大家带来一篇jQuery EasyUI中的日期控件DateBox修改方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
jquery在IE,FF浏览器差别的问题，在FF的效果很好，但是在IE上面没有效果，当时也没有在意，通过今天的练习发现，“是不是对于一些自定义的js，IE的兼容性不是太好呢2013-04-04
本文给大家汇总了下在jQuery中判断对象是否存在的方法以及用原生javascript实现的方法，有相同需求的小伙伴可以来参考下。2016-02-02
这篇文章主要为大家详细介绍了jquery实现时间选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论