在 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/[ 设计模式 ] | 单例模式)
