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

更新時間：2025年05月20日 11:22:16 作者：vvilkin的學習備忘

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

HTML5 內(nèi)置驗證

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

<form>
  <label for="username">用戶名:</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>

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

JavaScript 自定義驗證

雖然 HTML5 提供了基本的驗證功能，但在某些情況下，我們需要更復雜的驗證邏輯。這時，可以使用 JavaScript 編寫自定義的驗證邏輯。

<form id="myForm">
  <label for="username">用戶名:</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('用戶名必須在 3 到 20 個字符之間');
      return;
    }
 
    if (!validateEmail(email)) {
      alert('請輸入有效的郵箱地址');
      return;
    }
 
    if (password.length < 8) {
      alert('密碼必須至少 8 個字符');
      return;
    }
 
    // 如果所有驗證都通過，可以提交表單
    alert('表單驗證通過，可以提交表單');
    // this.submit(); // 如果需要提交表單，可以取消注釋這行
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>

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

使用正則表達式進行驗證

正則表達式是驗證字符串格式的強大工具。例如，驗證郵箱、電話號碼等。

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));
}

使用表單驗證 API

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

checkValidity()

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

let form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    alert('請?zhí)顚懰斜靥钭侄?);
  }
});

reportValidity()

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

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

validity 對象

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

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

validity 對象的常見屬性包括：

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

validationMessage 屬性

validationMessage 屬性返回當前表單元素的驗證錯誤信息。如果元素沒有錯誤，返回空字符串。

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

使用第三方庫

有許多第三方庫可以簡化表單驗證的過程，例如：

Validator.js: 一個簡單易用的字符串驗證庫。
Joi: 一個強大的數(shù)據(jù)驗證庫，適用于復雜的驗證場景。
Yup: 一個用于對象模式驗證的庫，常用于表單驗證。

// 使用 Yup 進行表單驗證
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);
});

實時驗證

你可以在用戶輸入時實時驗證表單字段，提供即時反饋。

<form id="myForm">
  <label for="username">用戶名:</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 = '用戶名必須在 3 到 20 個字符之間';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  document.getElementById('email').addEventListener('input', function() {
    let email = this.value;
    let errorSpan = document.getElementById('emailError');
    if (!validateEmail(email)) {
      errorSpan.textContent = '請輸入有效的郵箱地址';
    } 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 個字符';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>

總結(jié)

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

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

您可能感興趣的文章: