jquery中dom操作和事件的实例学习-表单验证
时间：2020-12-27 16:31:13|栏目：jquery|点击： 次
很显然，这样做能提升更好的用户体验。
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();
这句是为了保证后面提示的元素只有一个。如果没有这句，就会一直添加提示的元素。
