溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JQUERY失去焦點(diǎn)時(shí)驗(yàn)證多個(gè)表單

發(fā)布時(shí)間:2020-08-07 07:59:03 來(lái)源:網(wǎng)絡(luò) 閱讀:2075 作者:hhd916 欄目:web開發(fā)

今天算忙死了,登錄驗(yàn)證用的JS的innerHTML,竟然只要IE9認(rèn)識(shí)。朋友建議用JQ,于是就改成JQ,很少用JQ,看了點(diǎn)文檔,寫了一個(gè)用來(lái)驗(yàn)證三個(gè)表單,如下:

$(function(){
$("#username").blur(function(){//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
if(!$(this).val())//只處驗(yàn)證不能為空并且只能為英文或者數(shù)字或者下劃線組成的2-15個(gè)字符
{
$("#vuser").html("<span >*</span>");
}
else
{
$("#vuser").html("");
}
});
$("#pwd").blur(function () {//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
if (!$(this).val())//只處驗(yàn)證不能為空并且只能為英文或者數(shù)字或者下劃線組成的2-15個(gè)字符
{
$("#vpwd").html("<span >*</span>");
}
else {
$("#vpwd").html("");
}
});
$("#verifyCode").blur(function () {//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
if (!$(this).val())//只處驗(yàn)證不能為空并且只能為英文或者數(shù)字或者下劃線組成的2-15個(gè)字符
{
$("#vcode").html("<span >*</span>");
}
else {
$("#vcode").html("");
}
});
});

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

$(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">
驗(yàn)證碼:<input id="verifyCode" name="verifyCode" type="text" must='must' /><span t='v'></span></div>
<div class="yzm">
<span id="img_yzm"></span>
</div>
</div>

神呀,少了這么多代碼。以后要多學(xué)學(xué)JQ啦,不能固步自封了。。。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI