第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

當輸入邊框顏色驗證失敗時,如何將其設置為紅色?(僅限香草 JavaScript)

當輸入邊框顏色驗證失敗時,如何將其設置為紅色?(僅限香草 JavaScript)

慕工程0101907 2023-07-14 15:34:23
因此,我在表單上有一些文本輸入,當用戶嘗試提交表單并且輸入不符合特定條件時,我希望使邊框呈紅色發(fā)光。標準是字段不能為空,如果為空,表單會將用戶帶回該字段并顯示紅色邊框。下面是我到目前為止所得到的,但不僅樣式?jīng)]有顯示,而且字段也消失了。我需要改變什么?const submitButton = document.getElementById('submitButton');const name = document.getElementById('name');const email = document.getElementById('email');function nameValidation() {    if (name.value == 0) {        name.style.borderColor = "red solid 5px";    }}function emailValidation() {    if (email.value == 0) {        email.style.borderColor = "red solid 5px";    }}submitButton.addEventListener('click', () => {    nameValidation();    emailValidation();});<form action="index.html" novalidate>      <fieldset>              <label for="name">Name:</label>          <input type="text" id="name">        <label for="mail">Email:</label>          <input type="email" id="email">                </fieldset>            <button id="submitButton">Register</button></form>
查看完整描述

1 回答

?
翻過高山走不出你

TA貢獻1875條經(jīng)驗 獲得超3個贊

HTML 按鈕有一個默認行為,因此它會刷新整個頁面,這就是表單消失的原因。為了防止這種情況,您只需使用event.preventDefault()就像我在下面的提交按鈕事件處理函數(shù)中所做的那樣。


其次,您的 CSS 不適用的原因是您嘗試將“5px Solid”添加到 border-color CSS 屬性中。border-color 只接受顏色作為輸入。如果您需要設置其他屬性,則需要在邊框上進行。


另外,您將 name.value 和 email.value 的值與 0 進行比較。您應該使用空字符串 '' 進行比較。然而,空字符串在 Javascript 中是一個假值,所以即使你只是說 name.value 且 value 是空字符串 (''),那么在 if 條件下它也會是 false。您需要做的就是if(!name.value)即如果 name.value 不為 true,則執(zhí)行條件。


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

const name = document.querySelector('#name');

const email = document.querySelector('#email');


function nameValidation() {

  if (!name.value) {

    name.style.border = '5px solid';

    name.style.borderColor = 'red';

  }

}


function emailValidation() {

  if (!email.value) {

    email.style.border = '5px solid';

    email.style.borderColor = 'red';

  }

}


submitButton.addEventListener('click', e => {

  e.preventDefault();

  nameValidation();

  emailValidation();

});

<form action="index.html" novalidate>

          <fieldset>

            <label for="name">Name:</label>

            <input type="text" id="name" />


            <label for="mail">Email:</label>

            <input type="email" id="email" />

          </fieldset>


          <button id="submitButton">Register</button>

        </form>


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 358 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號