使用JavaScript和HTML5實現表單驗證功能

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

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

HTML5 內置驗證

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

<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 事件，并在事件處理函數中進行自定義驗證。如果驗證失敗，阻止表單提交并顯示錯誤提示。

使用正則表達式進行驗證

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

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 提供了一些內置的表單驗證 API，這些 API 可以幫助你更容易地實現表單驗證。

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ā)瀏覽器內置的驗證提示，顯示錯誤信息。

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: 如果瀏覽器無法將用戶的輸入轉換為有效的值（例如在 number 輸入框中輸入了非數字字符），返回 true。
customError: 如果元素設置了自定義的驗證錯誤信息，返回 true。

validationMessage 屬性

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

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

使用第三方庫

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

Validator.js: 一個簡單易用的字符串驗證庫。
Joi: 一個強大的數據驗證庫，適用于復雜的驗證場景。
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>

總結

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

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

您可能感興趣的文章:

layui框架與SSM前后臺交互的方法
今天小編就為大家分享一篇layui框架與SSM前后臺交互的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
基于canvas的二維碼邀請函生成插件
本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
javascript定義類和類的實現實例詳解
這篇文章主要介紹了javascript定義類和類的實現,結合實例形式較為詳細的分析了JavaScript類的定義方式與相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-12-12
簡述JS瀏覽器的三種彈窗
本文給大家簡單介紹了JS瀏覽器的三種彈窗，簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07
使用UrlConnection實現后臺模擬http請求的簡單實例
這篇文章主要介紹了使用UrlConnection實現后臺模擬http請求的簡單實例的相關資料,需要的朋友可以參考下
2017-01-01
JavaScript 異步調用框架 (Part 6 - 實例 & 模式)
我們用了5篇文章來討論如何編寫一個JavaScript異步調用框架（問題 & 場景、用例設計、代碼實現、鏈式調用、鏈式實現），現在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。
2009-08-08
Rxjs tap 操作符的使用場景示例
這篇文章主要為大家介紹了Rxjs tap 操作符的使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
詳解動畫插件wow.js的使用方法
本篇文章主要介紹了動畫插件wow.js的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js身份證判斷方法支持15位和18位
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下
2014-03-03
javascript使用alert實現一個精美的彈窗
其實最初使用alert還是一個常態(tài)，包括現在很多B端平臺還在直接使用alert，本文主要介紹了javascript使用alert實現一個精美的彈窗，感興趣的可以了解一下
2023-02-02