亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JavaScript 中的驗證 - 如何使紅色邊框消失?

JavaScript 中的驗證 - 如何使紅色邊框消失?

慕妹3146593 2023-09-28 16:37:22
目前,當字段為空且無效時,該字段將變為紅色并顯示描述文本。但是,當用戶正確填寫字段時,如何使字段和文本消失呢?HTML 中的代碼:<label for="email"><b>Email</b></label>        <label id="lblemail" style="color: red; visibility: hidden; float: right;">Invalid email</label><br>        <input type="text" placeholder="Enter Email" name="email" id="email"><br>JS 代碼:var email = document.getElementById("email");if (email.value.trim() == "") {    email.style.border = "solid 1px red"    document.getElementById("lblemail").style.visibility="visible";    return false;} else {  return true; }
查看完整描述

3 回答

?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

您應該在輸入事件上添加事件偵聽器:


const email = document.getElementById('email');

const label =? document.getElementById('lblemail');


email.addEventListener('input', function(e) {

? if (!e.target.value.trim()) {

? ? email.style.border = 'solid 1px red';

? ? label.style.visibility = 'visible';

? } else {

? ? email.style.border = 'solid 1px black';

? ? label.style.visibility = 'hidden';

? }

})

最好使用輸入事件,因為它會在每次更改輸入時檢查輸入


查看完整回答
反對 回復 2023-09-28
?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

我認為你可以使用js代碼取消設置


var email = document.getElementById("email");


if (email.value.trim() == "") {

    email.style.border = "solid 1px red"

    document.getElementById("lblemail").style.visibility="visible";

    return false;

} else {

    email.style.border = "none"

    document.getElementById("lblemail").style.visibility="hidden";

  return true; 

}


查看完整回答
反對 回復 2023-09-28
?
四季花海

TA貢獻1811條經驗 獲得超5個贊

我認為你可以使用事件偵聽器,這應該可行


var email = document.getElementById("email");


email.addEventListener('change', () => {

 if (email.value.trim() == "") {

     email.style.border = "solid 1px red"

     document.getElementById("lblemail").style.visibility="visible";

     return false;

 } else {

   email.style.border = none;

   document.getElementById("lblemail").style.visibility="visible";

   return true; }


})


查看完整回答
反對 回復 2023-09-28
  • 3 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號