很顯然，這樣做能提升更好的用戶體驗。
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();
這句是為了保證後面提示的元素只有一個。如果沒有這句，就會一直添加提示的元素。