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'>請(qǐng)輸入至少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)該不難理解上面的代碼
可能對(duì)于這句代碼有疑問。 $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'>請(qǐng)輸入至少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)該不難理解上面的代碼
可能對(duì)于這句代碼有疑問。 $parent.find(".formtips").remove();
這句是為了保證后面提示的元素只有一個(gè)。如果沒有這句，就會(huì)一直添加提示的元素。
相關(guān)文章
基于jquery的圖片幻燈展示源碼，需要的朋友可以參考下2012-07-07
JQuery使用數(shù)組遍歷跳出each循環(huán)
這篇文章主要介紹了JQuery使用數(shù)組遍歷跳出each循環(huán),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
jquery $.trim()去除字符串空格的實(shí)現(xiàn)方法【附圖例】
下面小編就為大家?guī)硪黄猨query $.trim()去除字符串空格的實(shí)現(xiàn)方法【附圖例】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jquery在IE,FF瀏覽器差別的問題，在FF的效果很好，但是在IE上面沒有效果，當(dāng)時(shí)也沒有在意，通過今天的練習(xí)發(fā)現(xiàn)，“是不是對(duì)于一些自定義的js，IE的兼容性不是太好呢2013-04-04
本文給大家匯總了下在jQuery中判斷對(duì)象是否存在的方法以及用原生javascript實(shí)現(xiàn)的方法，有相同需求的小伙伴可以來參考下。2016-02-02
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)時(shí)間選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04