JQUERY失去焦點時驗證多個表單

今天算忙死了,登錄驗證用的JS的innerHTML,竟然只要IE9認識。朋友建議用JQ,於是就改成JQ,很少用JQ,看了點文檔,寫了一個用來驗證三個表單,如下:

$(function(){
$("#username").blur(function(){//用戶名文本框失去焦點觸發驗證事件
if(!$(this).val())//只處驗證不能爲空並且只能爲英文或者數字或者下劃線組成的2-15個字符
{
$("#vuser").html("<span style="color:#ff0000; font-size:16px">*</span>");
}
else
{
$("#vuser").html("");
}
});
$("#pwd").blur(function () {//用戶名文本框失去焦點觸發驗證事件
if (!$(this).val())//只處驗證不能爲空並且只能爲英文或者數字或者下劃線組成的2-15個字符
{
$("#vpwd").html("<span style="color:#ff0000; font-size:16px">*</span>");
}
else {
$("#vpwd").html("");
}
});
$("#verifyCode").blur(function () {//用戶名文本框失去焦點觸發驗證事件
if (!$(this).val())//只處驗證不能爲空並且只能爲英文或者數字或者下劃線組成的2-15個字符
{
$("#vcode").html("<span style="color:#ff0000; font-size:16px">*</span>");
}
else {
$("#vcode").html("");
}
});
});

寫完後一看,天吶,這我要弄十個表單豈不是要寫十次,真是太恐怖了。。。又向朋友求解,朋友告訴我一個方法,經一番努力後,寫下如下代碼

$(function () {
$("input[must='must']").blur(function () {
if ($(this).val().length == 0) {
$(this).next().html("<font style='color:#f00'>*</font>");
}
else {
$(this).next().html("");
}
});
});

表單是這樣的

<div class="user">
用戶名:<input id="username" name="username" must='must' type="text" /><span t='v'></span></div>
<div class="user">
密 碼:<input id="pwd" name="pwd" type="password" must='must' /><span t='v'></span></div>
<div class="user">
<div class="yzk">
驗證碼:<input id="verifyCode" name="verifyCode" type="text" must='must' /><span t='v'></span></div>
<div class="yzm">
<span id="img_yzm"></span>
</div>
</div>

神呀,少了這麼多代碼。以後要多學學JQ啦,不能固步自封了。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章