首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery输入框验证

基于 jQuery实现灵活可配置的输入框验证功能(最新推荐)

2025-05-06 10:39:35 作者：Enti7c

本文将介绍如何使用 HTML、CSS 和 jQuery 构建一个可灵活配置的输入框验证系统,轻松应对不同类型的验证需求,感兴趣的朋友一起看看吧

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

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

到此这篇关于基于 jQuery 实现灵活可配置的输入框验证功能的文章就介绍到这了,更多相关jquery输入框验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！