jquery中dom操作和事件的實例學習-表單驗證
更新時間：2011年11月30日 19:40:38 作者：
這個demo的效果是實現(xiàn)用戶輸入時提供實時提醒，并不一定要等到元素失去焦點時才提醒
很顯然，這樣做能提升更好的用戶體驗。
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>
好，現(xiàn)在來詳細分析下里面的jquery語句。
先看dom操作的語句
$('form:input') 這個是用來查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
類似的還有$(':text'),$(':checkbox')等。反正只要明白只有在表單內(nèi)，通過表單選擇器都能得到相應的元素。
parent()是找到匹配元素的父節(jié)點。find()是來搜索與表達式匹配的元素。remove()是用來刪除元素。
is()是用一個表達式來檢查當前選擇器的元素集合，如果存在至少一個匹配元素，則返回 true。
appendTo()是把一個元素添加到令一個元素中
triggerHandler()這一個特點方法會觸發(fā)元素上的特定事件。
再看事件的語句。
keyup()是按鍵向上時觸發(fā)。
理解每個方法后應該不難理解上面的代碼
可能對于這句代碼有疑問。 $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>
好，現(xiàn)在來詳細分析下里面的jquery語句。
先看dom操作的語句
$('form:input') 這個是用來查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
類似的還有$(':text'),$(':checkbox')等。反正只要明白只有在表單內(nèi)，通過表單選擇器都能得到相應的元素。
parent()是找到匹配元素的父節(jié)點。find()是來搜索與表達式匹配的元素。remove()是用來刪除元素。
is()是用一個表達式來檢查當前選擇器的元素集合，如果存在至少一個匹配元素，則返回 true。
appendTo()是把一個元素添加到令一個元素中
triggerHandler()這一個特點方法會觸發(fā)元素上的特定事件。
再看事件的語句。
keyup()是按鍵向上時觸發(fā)。
理解每個方法后應該不難理解上面的代碼
可能對于這句代碼有疑問。 $parent.find(".formtips").remove();
這句是為了保證后面提示的元素只有一個。如果沒有這句，就會一直添加提示的元素。
相關文章
基于jquery的圖片幻燈展示源碼，需要的朋友可以參考下2012-07-07
JQuery使用數(shù)組遍歷跳出each循環(huán)
這篇文章主要介紹了JQuery使用數(shù)組遍歷跳出each循環(huán),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
jquery $.trim()去除字符串空格的實現(xiàn)方法【附圖例】
下面小編就為大家?guī)硪黄猨query $.trim()去除字符串空格的實現(xiàn)方法【附圖例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了jquery實現(xiàn)焦點圖片隨機切換效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jquery在IE,FF瀏覽器差別的問題，在FF的效果很好，但是在IE上面沒有效果，當時也沒有在意，通過今天的練習發(fā)現(xiàn)，“是不是對于一些自定義的js，IE的兼容性不是太好呢2013-04-04
本文給大家匯總了下在jQuery中判斷對象是否存在的方法以及用原生javascript實現(xiàn)的方法，有相同需求的小伙伴可以來參考下。2016-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)時間選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04