在 Web 表單開發中，輸入框驗證是保障數據準確性和安全性的關鍵環節。無論是用戶注冊、信息提交還是數據錄入場景，都需要對用戶輸入內容進行合法性檢查。本文將介紹如何使用 HTML、CSS 和 jQuery 構建一個可靈活配置的輸入框驗證系統，輕松應對不同類型的驗證需求。
一、功能概述與應用場景
該輸入框驗證系統支持以下核心功能：
- 多類型驗證：可對用戶名、電話、密碼等不同字段設置獨立的驗證規則，如長度限制、格式匹配等。
- 實時反饋：用戶輸入時實時檢查，輸入不符合要求時立即顯示錯誤提示。
- 提交前驗證：在表單提交時自動校驗所有字段，確保數據完整合法。
適用于用戶注冊表單、訂單填寫、信息修改等各類需要輸入數據校驗的業務場景。
效果圖：
二、HTML 結構搭建
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輸入框驗證</title><style>/* 樣式代碼將在下文CSS部分詳細說明 */</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div class="form-container"><h2>輸入框驗證</h2><div class="form-group"><label for="username">用戶名：</label><input type="text" id="username" autocomplete="off"><div class="error-message" id="usernameError"></div></div><div class="form-group"><label for="tel">電話：</label><input type="text" id="tel"><div class="error-message" id="telError"></div></div><div class="form-group"><label for="password">密碼：</label><input type="password" id="password"><div class="error-message" id="passwordError"></div></div><div class="form-group"><label for="address">地址：</label><input type="text" id="address"><div class="error-message" id="addressError"></div></div><div class="form-group"><label for="industry">行業：</label><input type="text" id="industry"><div class="error-message" id="industryError"></div></div><div class="form-group"><label for="scol">學校：</label><input type="text" id="scol"><div class="error-message" id="scolError"></div></div><button id="submitButton">提交</button></div><script>// JavaScript實現代碼將在下文JavaScript部分詳細說明</script>
</body></html>
HTML 代碼構建了表單的基礎結構：
- 外層
div（類名form-container）作為表單容器，提供統一的樣式和布局。 - 每個
form-group包裹一個輸入字段，包含label標簽、input輸入框和用于顯示錯誤信息的div（類名error-message）。 submitButton按鈕用于觸發表單提交和整體驗證邏輯。
三、CSS 樣式設計
.form-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.form-group {margin-bottom: 15px;height: 60px;
}.form-group label {display: block;margin-bottom: 5px;
}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;
}.form-group input.error {border-color: #ff0000;
}.error-message {color: #ff0000;font-size: 12px;
}button {width: 100%;padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;margin-top: 10px;
}button:hover {background-color: #0056b3;
}
CSS 代碼為表單賦予了美觀且實用的樣式：
form-container設置了白色背景、圓角邊框和陰影效果，增強視覺吸引力。form-group定義了每個輸入組的間距和高度，確保布局整齊。- 為
input元素設置默認樣式，當添加error類時（驗證失敗），邊框變為紅色以提示用戶。 error-message定義錯誤提示文字的顏色和字體大小，button設置提交按鈕的背景色、交互效果等。
四、jQuery 功能實現
$(function () {const $form = $('.form-container');const $inputs = $form.find('input[type="text"], input[type="password"]');const inputs = $inputs.map(function () {const $input = $(this);const id = $input.attr('id');const $error = $(`#${id}Error`);const label = $form.find(`label[for="${id}"]`).text().replace('：', '');let validationRule;let errorMessage;switch (id) {case 'username':validationRule = (value) => $.trim(value).length >= 3;errorMessage = `${label}長度不能少于3個字符`;break;case 'tel':validationRule = (value) => /^\d{11}$/.test($.trim(value));errorMessage = `${label}必須為11位數字`;break;case 'password':validationRule = (value) => $.trim(value).length >= 6;errorMessage = `${label}長度不能少于6個字符`;break;case 'address':validationRule = (value) => $.trim(value)!== '';errorMessage = `${label}不能為空`;break;case'scol':validationRule = (value) => $.trim(value)!== '';errorMessage = `${label}名稱不能為空`;break;default:validationRule = (value) => $.trim(value)!== '';errorMessage = `${label}不能為空`;}return {input: $input,error: $error,validationRule,errorMessage};}).get();function validateInput(inputData) {const { input, error, validationRule, errorMessage } = inputData;error.text('');input.removeClass('error');const value = input.val();if (!validationRule(value)) {error.text(errorMessage);input.addClass('error');return false;}return true;}$inputs.on('change', function () {const inputData = inputs.find(item => item.input.is(this));if (inputData) {validateInput(inputData);}});$('#submitButton').on('click', function () {let isValid = true;inputs.forEach(inputData => {if (!validateInput(inputData)) {isValid = false;}});if (isValid) {alert('輸入驗證成功！');}});
});
JavaScript 代碼通過 jQuery 實現了核心驗證邏輯：
- 初始化配置：
- 提取所有文本和密碼輸入框，為每個輸入框創建包含驗證規則、錯誤提示信息、輸入元素和錯誤顯示元素的配置對象。
- 使用
switch語句根據輸入框id設置不同的驗證規則和錯誤提示，支持自定義擴展。
- 單個驗證函數：
validateInput函數負責執行單個輸入框的驗證，清空錯誤信息、移除錯誤樣式，根據驗證規則判斷輸入是否合法，若不合法則顯示錯誤提示并添加錯誤樣式。 - 實時驗證：為輸入框綁定
change事件，用戶輸入內容變化時立即觸發驗證，提供即時反饋。 - 提交驗證：為提交按鈕綁定
click事件，遍歷所有輸入框進行驗證，只有當所有輸入框都通過驗證時，才提示驗證成功。
五、擴展與使用說明
- 新增驗證字段：只需在 HTML 中添加
form-group結構，并在 JavaScript 的switch語句中增加對應case配置驗證規則和錯誤提示。 - 修改驗證邏輯：直接調整
validationRule函數內的判斷條件，如修改長度限制、正則表達式等。 - 國際化支持：通過修改
errorMessage文本內容，可輕松實現多語言錯誤提示。
通過以上代碼和配置，開發者可以快速搭建功能強大的輸入框驗證系統，有效提升表單數據質量和用戶體驗。
![[ 設計模式 ] | 單例模式](http://pic.xiahunao.cn/[ 設計模式 ] | 單例模式)
