基于 jQuery 实现灵活可配置的输入框验证功能-CSDN博客

本文链接：https://blog.csdn.net/Z09111616/article/details/147723714

在 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文本内容，可轻松实现多语言错误提示。

通过以上代码和配置，开发者可以快速搭建功能强大的输入框验证系统，有效提升表单数据质量和用户体验。