如何使用 JavaScript 實(shí)作表單的輸入框內(nèi)容即時(shí)校驗(yàn)功能？

在許多網(wǎng)頁應(yīng)用程式中，表單是使用者與系統(tǒng)之間最常用的互動(dòng)方式。然而，使用者輸入的內(nèi)容往往需要進(jìn)行有效性校驗(yàn)，以確保資料的準(zhǔn)確性和完整性。在這篇文章中，我們將學(xué)習(xí)如何使用 JavaScript 實(shí)作表單的輸入框內(nèi)容即時(shí)校驗(yàn)功能，並提供具體的程式碼範(fàn)例。

1. 建立表單
   首先，我們需要在 HTML 中建立一個(gè)簡單的表單，以展示即時(shí)校驗(yàn)的功能。以下是一個(gè)包含使用者名稱、密碼和郵箱的表單範(fàn)例：

<form>
  <label for="username">用戶名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密碼:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">郵箱:</label>
  <input type="email" id="email" required>
</form>

2. 選擇輸入框和新增校驗(yàn)事件
   接下來，我們使用JavaScript 選擇這些輸入框，並為它們新增即時(shí)校驗(yàn)事件。透過監(jiān)聽輸入事件或失去焦點(diǎn)事件，我們可以即時(shí)檢查使用者輸入的內(nèi)容。

// 選擇輸入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校驗(yàn)事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);

3. 寫校驗(yàn)函數(shù)
   接下來，我們需要寫校驗(yàn)函數(shù)來檢查輸入框的內(nèi)容。根據(jù)特定的校驗(yàn)規(guī)則，我們可以使用正規(guī)表示式或其他方法來驗(yàn)證使用者輸入。

function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}

4. 樣式化校驗(yàn)結(jié)果
   最後，我們可以在CSS 檔案中定義校驗(yàn)通過和校驗(yàn)失敗的樣式，以便使用者可以直觀地看到輸入框的狀態(tài)。

.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}

至此，我們已經(jīng)完成了使用 JavaScript 實(shí)作表單的輸入框內(nèi)容即時(shí)校驗(yàn)功能的步驟。當(dāng)使用者在輸入框中輸入時(shí)，我們使用校驗(yàn)函數(shù)來檢查輸入的內(nèi)容，並根據(jù)校驗(yàn)結(jié)果來更新輸入框的樣式。這為用戶提供了一種即時(shí)回饋，幫助他們更快發(fā)現(xiàn)錯(cuò)誤並進(jìn)行修正。

總結(jié)
在這篇文章中，我們學(xué)習(xí)如何使用 JavaScript 實(shí)作表單的輸入框內(nèi)容即時(shí)校驗(yàn)功能。透過選擇輸入框、新增校驗(yàn)事件，編寫校驗(yàn)函數(shù)，並樣式化校驗(yàn)結(jié)果，我們可以為使用者提供即時(shí)回饋的方式，幫助他們更好地進(jìn)行表單輸入。這是一個(gè)簡單而實(shí)用的技巧，可以提高使用者體驗(yàn)和資料的質(zhì)量，並減少錯(cuò)誤操作的影響。

以上是如何使用 JavaScript 實(shí)作表單的輸入框內(nèi)容即時(shí)校驗(yàn)功能？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！