使用JavaScript和HTML5實(shí)現(xiàn)表單驗(yàn)證功能

更新時(shí)間：2025年05月20日 11:22:16 作者：vvilkin的學(xué)習(xí)備忘

表單驗(yàn)證是Web開(kāi)發(fā)中不可或缺的一部分,它確保用戶(hù)輸入的數(shù)據(jù)符合預(yù)期格式和要求,通過(guò)客戶(hù)端驗(yàn)證,我們可以提高用戶(hù)體驗(yàn),減少不必要的服務(wù)器請(qǐng)求,然而,客戶(hù)端驗(yàn)證并不能替代服務(wù)器端驗(yàn)證,所以本文將介紹如何使用JavaScript和HTML5實(shí)現(xiàn)強(qiáng)大的表單驗(yàn)證,需要的朋友可以參考下

HTML5 內(nèi)置驗(yàn)證

HTML5 提供了一些內(nèi)置的表單驗(yàn)證功能，例如 required, min, max, pattern 等。這些屬性可以簡(jiǎn)單地添加到表單元素中，以實(shí)現(xiàn)基本的驗(yàn)證。

<form>
  <label for="username">用戶(hù)名:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">
  
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password" required minlength="8">
  
  <input type="submit" value="提交">
</form>

在這個(gè)例子中，required 屬性確保字段不能為空，minlength 和 maxlength 屬性限制了用戶(hù)名的長(zhǎng)度，type="email" 確保輸入的郵箱地址格式正確。

JavaScript 自定義驗(yàn)證

雖然 HTML5 提供了基本的驗(yàn)證功能，但在某些情況下，我們需要更復(fù)雜的驗(yàn)證邏輯。這時(shí)，可以使用 JavaScript 編寫(xiě)自定義的驗(yàn)證邏輯。

<form id="myForm">
  <label for="username">用戶(hù)名:</label>
  <input type="text" id="username" name="username">
  
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email">
  
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="提交">
</form>
 
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表單提交
 
    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
 
    if (username.length < 3 || username.length > 20) {
      alert('用戶(hù)名必須在 3 到 20 個(gè)字符之間');
      return;
    }
 
    if (!validateEmail(email)) {
      alert('請(qǐng)輸入有效的郵箱地址');
      return;
    }
 
    if (password.length < 8) {
      alert('密碼必須至少 8 個(gè)字符');
      return;
    }
 
    // 如果所有驗(yàn)證都通過(guò)，可以提交表單
    alert('表單驗(yàn)證通過(guò)，可以提交表單');
    // this.submit(); // 如果需要提交表單，可以取消注釋這行
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>

在這個(gè)例子中，我們使用 JavaScript 監(jiān)聽(tīng)表單的 submit 事件，并在事件處理函數(shù)中進(jìn)行自定義驗(yàn)證。如果驗(yàn)證失敗，阻止表單提交并顯示錯(cuò)誤提示。

使用正則表達(dá)式進(jìn)行驗(yàn)證

正則表達(dá)式是驗(yàn)證字符串格式的強(qiáng)大工具。例如，驗(yàn)證郵箱、電話(huà)號(hào)碼等。

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(String(email).toLowerCase());
}
 
function validatePhone(phone) {
  const re = /^\d{10}$/;
  return re.test(String(phone));
}

使用表單驗(yàn)證 API

HTML5 提供了一些內(nèi)置的表單驗(yàn)證 API，這些 API 可以幫助你更容易地實(shí)現(xiàn)表單驗(yàn)證。

checkValidity()

checkValidity() 方法用于檢查表單或表單元素是否滿(mǎn)足所有的約束條件。如果滿(mǎn)足，返回 true，否則返回 false。

let form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    alert('請(qǐng)?zhí)顚?xiě)所有必填字段');
  }
});

reportValidity()

reportValidity() 方法與 checkValidity() 類(lèi)似，但它會(huì)觸發(fā)瀏覽器內(nèi)置的驗(yàn)證提示，顯示錯(cuò)誤信息。

let form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  if (!form.reportValidity()) {
    event.preventDefault();
  }
});

validity 對(duì)象

每個(gè)表單元素都有一個(gè) validity 對(duì)象，它包含多個(gè)布爾屬性，用于表示不同的驗(yàn)證狀態(tài)。

let email = document.getElementById('email');
 
email.addEventListener('input', function() {
  if (email.validity.typeMismatch) {
    email.setCustomValidity('請(qǐng)輸入有效的郵箱地址');
  } else {
    email.setCustomValidity('');
  }
});

validity 對(duì)象的常見(jiàn)屬性包括：

valid: 如果元素滿(mǎn)足所有的約束條件，返回 true。
valueMissing: 如果元素是必填項(xiàng)但沒(méi)有值，返回 true。
typeMismatch: 如果元素的值不符合 type 屬性的要求（例如 email 或 url），返回 true。
patternMismatch: 如果元素的值不符合 pattern 屬性的要求，返回 true。
tooLong: 如果元素的值超過(guò)了 maxLength 屬性的限制，返回 true。
tooShort: 如果元素的值少于 minLength 屬性的限制，返回 true。
rangeUnderflow: 如果元素的值小于 min 屬性的值，返回 true。
rangeOverflow: 如果元素的值大于 max 屬性的值，返回 true。
stepMismatch: 如果元素的值不符合 step 屬性的要求，返回 true。
badInput: 如果瀏覽器無(wú)法將用戶(hù)的輸入轉(zhuǎn)換為有效的值（例如在 number 輸入框中輸入了非數(shù)字字符），返回 true。
customError: 如果元素設(shè)置了自定義的驗(yàn)證錯(cuò)誤信息，返回 true。

validationMessage 屬性

validationMessage 屬性返回當(dāng)前表單元素的驗(yàn)證錯(cuò)誤信息。如果元素沒(méi)有錯(cuò)誤，返回空字符串。

let email = document.getElementById('email');
 
email.addEventListener('input', function() {
  if (!email.checkValidity()) {
    console.log(email.validationMessage);
  }
});

使用第三方庫(kù)

有許多第三方庫(kù)可以簡(jiǎn)化表單驗(yàn)證的過(guò)程，例如：

Validator.js: 一個(gè)簡(jiǎn)單易用的字符串驗(yàn)證庫(kù)。
Joi: 一個(gè)強(qiáng)大的數(shù)據(jù)驗(yàn)證庫(kù)，適用于復(fù)雜的驗(yàn)證場(chǎng)景。
Yup: 一個(gè)用于對(duì)象模式驗(yàn)證的庫(kù)，常用于表單驗(yàn)證。

// 使用 Yup 進(jìn)行表單驗(yàn)證
const yup = require('yup');
 
const schema = yup.object().shape({
  username: yup.string().min(3).max(20).required(),
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});
 
schema.validate({
  username: 'john',
  email: 'john@example.com',
  password: 'password123'
}).then(function(valid) {
  console.log('Valid');
}).catch(function(err) {
  console.log(err.errors);
});

實(shí)時(shí)驗(yàn)證

你可以在用戶(hù)輸入時(shí)實(shí)時(shí)驗(yàn)證表單字段，提供即時(shí)反饋。

<form id="myForm">
  <label for="username">用戶(hù)名:</label>
  <input type="text" id="username" name="username">
  <span id="usernameError" style="color:red;"></span>
  
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email">
  <span id="emailError" style="color:red;"></span>
  
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError" style="color:red;"></span>
  
  <input type="submit" value="提交">
</form>
 
<script>
  document.getElementById('username').addEventListener('input', function() {
    let username = this.value;
    let errorSpan = document.getElementById('usernameError');
    if (username.length < 3 || username.length > 20) {
      errorSpan.textContent = '用戶(hù)名必須在 3 到 20 個(gè)字符之間';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  document.getElementById('email').addEventListener('input', function() {
    let email = this.value;
    let errorSpan = document.getElementById('emailError');
    if (!validateEmail(email)) {
      errorSpan.textContent = '請(qǐng)輸入有效的郵箱地址';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  document.getElementById('password').addEventListener('input', function() {
    let password = this.value;
    let errorSpan = document.getElementById('passwordError');
    if (password.length < 8) {
      errorSpan.textContent = '密碼必須至少 8 個(gè)字符';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>

總結(jié)

通過(guò)結(jié)合 HTML5 內(nèi)置驗(yàn)證、JavaScript 自定義驗(yàn)證、正則表達(dá)式和表單驗(yàn)證 API，你可以創(chuàng)建強(qiáng)大且用戶(hù)友好的表單驗(yàn)證機(jī)制。記住，客戶(hù)端驗(yàn)證不能替代服務(wù)器端驗(yàn)證，兩者應(yīng)該結(jié)合使用以確保數(shù)據(jù)的安全性和完整性。希望本文能幫助你更好地理解和實(shí)現(xiàn)表單驗(yàn)證。

以上就是使用JavaScript和HTML5實(shí)現(xiàn)表單驗(yàn)證功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript HTML5表單驗(yàn)證的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: