jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
更新時(shí)間：2011年11月30日 19:40:38 作者：
這個(gè)demo的效果是實(shí)現(xiàn)用戶輸入時(shí)提供實(shí)時(shí)提醒，并不一定要等到元素失去焦點(diǎn)時(shí)才提醒
很顯然，這樣做能提升更好的用戶體驗(yà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)在來詳細(xì)分析下里面的jquery語句。
先看dom操作的語句
$('form:input') 這個(gè)是用來查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
類似的還有$(':text'),$(':checkbox')等。反正只要明白只有在表單內(nèi)，通過表單選擇器都能得到相應(yīng)的元素。
parent()是找到匹配元素的父節(jié)點(diǎn)。find()是來搜索與表達(dá)式匹配的元素。remove()是用來刪除元素。
is()是用一個(gè)表達(dá)式來檢查當(dāng)前選擇器的元素集合，如果存在至少一個(gè)匹配元素，則返回 true。
appendTo()是把一個(gè)元素添加到令一個(gè)元素中
triggerHandler()這一個(gè)特點(diǎn)方法會(huì)觸發(fā)元素上的特定事件。
再看事件的語句。
keyup()是按鍵向上時(shí)觸發(fā)。
理解每個(gè)方法后應(yīng)該不難理解上面的代碼
可能對于這句代碼有疑問。 $parent.find(".formtips").remove();
這句是為了保證后面提示的元素只有一個(gè)。如果沒有這句，就會(huì)一直添加提示的元素。
html代碼：
復(fù)制代碼 代碼如下:
<form method="post" action="">
<div class="int">
<label for="username">用戶名:</label>
<input type="text" id="username" class="required"/>
</div></form>
jquery代碼：
復(fù)制代碼 代碼如下:
<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)在來詳細(xì)分析下里面的jquery語句。
先看dom操作的語句
$('form:input') 這個(gè)是用來查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
類似的還有$(':text'),$(':checkbox')等。反正只要明白只有在表單內(nèi)，通過表單選擇器都能得到相應(yīng)的元素。
parent()是找到匹配元素的父節(jié)點(diǎn)。find()是來搜索與表達(dá)式匹配的元素。remove()是用來刪除元素。
is()是用一個(gè)表達(dá)式來檢查當(dāng)前選擇器的元素集合，如果存在至少一個(gè)匹配元素，則返回 true。
appendTo()是把一個(gè)元素添加到令一個(gè)元素中
triggerHandler()這一個(gè)特點(diǎn)方法會(huì)觸發(fā)元素上的特定事件。
再看事件的語句。
keyup()是按鍵向上時(shí)觸發(fā)。
理解每個(gè)方法后應(yīng)該不難理解上面的代碼
可能對于這句代碼有疑問。 $parent.find(".formtips").remove();
這句是為了保證后面提示的元素只有一個(gè)。如果沒有這句，就會(huì)一直添加提示的元素。
相關(guān)文章
jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
這篇文章主要介紹了jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值的具體實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的帶有索引按鈕且自動(dòng)輪播切換特效，圖片簡單大方，感興趣的小伙伴可以參考下。2015-09-09
jQuery聯(lián)動(dòng)日歷的實(shí)例解析
本篇文章主要對jQuery聯(lián)動(dòng)日歷的實(shí)例進(jìn)行解析說明。有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對大家有所幫助2016-12-12
用jquery修復(fù)在iframe下的頁面錨點(diǎn)失效問題
iframe頁面沒有滾動(dòng)條，在父窗體中出現(xiàn)滾動(dòng)條，錨點(diǎn)標(biāo)記就會(huì)失效，用js判斷頁面是否被嵌套，用js計(jì)算iframe在父窗體位置2014-08-08
由于在園子里還沒發(fā)現(xiàn)這方面的文章，所以就來簡單地介紹一下，本文只是簡單的歸納介紹，不是完整的翻譯，全文請參考原文2012-08-08
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui表單組件Form的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
jquery其實(shí)本身的事件機(jī)制就很完善了，包括了單擊，雙擊，鼠標(biāo)移入，鼠標(biāo)移出等。但是卻少了一個(gè)做事件。就是鼠標(biāo)右擊事件。當(dāng)然大家也是直接用偵聽鼠標(biāo)按下事件，然后通過if來判斷執(zhí)行相應(yīng)的函數(shù)。造成鼠標(biāo)右擊事件的效果2011-12-12
這篇文章主要介紹了 jQuery自定義插件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
淺談jquery fullpage 插件增加頭部和版權(quán)的方法
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看2018-03-03
本文主要分享了編寫設(shè)置和獲取顏色的插件，該插件用來實(shí)現(xiàn)兩個(gè)功能：1.設(shè)置元素的顏色;2.獲取元素的顏色。 具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01