表單驗(yàn)證的關(guān)鍵在於明確規(guī)則、合理綁定事件、友好提示用戶(hù)。 1. 確定需驗(yàn)證字段，如必填項(xiàng)、格式校驗(yàn)（郵箱、電話）、長(zhǎng)度限制（如密碼至少8位）；2. 通過(guò)addEventListener 監(jiān)聽(tīng)submit 事件並獲取輸入值，使用e.preventDefault() 阻止默認(rèn)提交；3. 顯示錯(cuò)誤提示建議用元素展示具體信息，並在輸入框獲得焦點(diǎn)時(shí)清除提示；4. 可結(jié)合HTML5 內(nèi)置驗(yàn)證屬性如required、type="email"、minlength 提升兼容性，但仍建議自定義提示以保持一致性。

驗(yàn)證表單是前端開(kāi)發(fā)中一個(gè)很基礎(chǔ)但非常重要的部分，尤其是在沒(méi)有後端支持時(shí)，用JavaScript 做客戶(hù)端驗(yàn)證能提升用戶(hù)體驗(yàn)。下面是一些常見(jiàn)的做法和建議。

1. 確定需要驗(yàn)證的字段

不是所有表單字段都需要驗(yàn)證，比如“備註”這種可選信息。但像用戶(hù)名、郵箱、密碼這類(lèi)字段通常必須填寫(xiě)且格式要正確。

• 必填項(xiàng)：檢查是否為空
• 格式校驗(yàn)：如郵箱、電話號(hào)碼、密碼強(qiáng)度等
• 長(zhǎng)度限制：如密碼至少8位，用戶(hù)名不超過(guò)20字符

例如，驗(yàn)證一個(gè)郵箱是否符合基本格式可以用正則表達(dá)式：

 function isValidEmail(email) {
  const re = /^[^\s@] @[^\s@] \.[^\s@] $/;
  return re.test(email);
}

2. 綁定事件並獲取輸入值

最常見(jiàn)的做法是在用戶(hù)點(diǎn)擊提交按鈕時(shí)觸發(fā)驗(yàn)證邏輯。你可以通過(guò)addEventListener來(lái)監(jiān)聽(tīng)submit事件，並阻止默認(rèn)提交行為。

 document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表單默認(rèn)提交行為const emailInput = document.getElementById('email');
  const emailValue = emailInput.value;

  if (!isValidEmail(emailValue)) {
    alert('請(qǐng)輸入有效的郵箱地址');
    return;
  }

  // 如果驗(yàn)證都通過(guò)了，再真正提交this.submit();
});

注意這裡用了e.preventDefault() ，這樣可以在驗(yàn)證失敗時(shí)不跳轉(zhuǎn)頁(yè)面。

3. 顯示錯(cuò)誤提示的方式

直接彈窗雖然簡(jiǎn)單，但體驗(yàn)不好。更好的方式是：

• 在輸入框旁邊顯示錯(cuò)誤信息（如<div class="error"> ）
• 給出更具體的提示，比如“密碼至少包含一個(gè)數(shù)字”
• 輸入框獲得焦點(diǎn)時(shí)清除錯(cuò)誤提示

舉個(gè)例子：

 <input type="email" id="email" />
<div class="error" id="emailError"></div>

對(duì)應(yīng)的JS：

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

if (!isValidEmail(emailValue)) {
  emailError.textContent = '請(qǐng)輸入有效的郵箱地址';
  emailInput.focus();
} else {
  emailError.textContent = '';
}

4. 利用HTML5 的內(nèi)置驗(yàn)證功能（可選）

現(xiàn)代瀏覽器支持一些原生的表單驗(yàn)證屬性，比如required 、 type="email" 、 minlength等。

 <input type="email" required minlength="6" />

即使你用JS 驗(yàn)證，也可以結(jié)合這些屬性做初步判斷，提升兼容性和簡(jiǎn)潔性。

不過(guò)要注意：不同瀏覽器對(duì)這些驗(yàn)證的樣式和提示可能不一致，最好還是自己控制錯(cuò)誤提示。

基本上就這些。表單驗(yàn)證的關(guān)鍵在於明確規(guī)則、合理綁定事件、友好地提示用戶(hù)?？此坪?jiǎn)單，但細(xì)節(jié)處理好了才能真正提升體驗(yàn)。

以上是如何用JS驗(yàn)證表格？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！