使用 jQuery 验证输入框长度并启用/禁用按钮_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 jQuery 验证输入框长度并启用/禁用按钮

2025-10-12

浏览次数：次

返回列表

使用 jquery 验证输入框长度并启用/禁用按钮

本文将介绍如何使用 jQuery 实时监控输入框的长度，并根据输入长度是否满足特定条件（例如，必须为 10 位数字）来动态启用或禁用提交按钮。我们将提供详细的代码示例，并解释关键步骤，帮助你轻松实现此功能。

需求分析

我们的目标是创建一个表单，其中包含一个电话号码输入框和一个提交按钮。要求如下：

输入框只能接受数字输入。
输入框最多允许输入 10 位数字。
当输入框中的数字达到 10 位时，启用提交按钮；否则，禁用提交按钮。

HTML 结构

首先，我们需要创建基本的 HTML 结构。以下是一个使用 Bootstrap 样式的简单表单示例：

<div class="form-group">
    <label for="phoneNumber">Phone Number</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">+ 91</span>
        </div>
        <input type="number" class="form-control" id="phoneNumber" name="phone_number" maxlength="10" required>
    </div>
</div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">

在这个结构中：

phoneNumber 是输入框的 ID，用于 jQuery 选择器。
maxlength="10" 限制了输入框的最大长度为 10 个字符。
disabled 属性使得提交按钮初始状态为禁用。

jQuery 代码实现

接下来，我们使用 jQuery 来实现实时验证和按钮状态切换的逻辑。

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

$(document).ready(function() {
    $('#phoneNumber').on('input', function() {
        var inputValue = $(this).val();
        var submitButton = $('#submitButton');

        // 使用正则表达式检查是否为纯数字
        if (!/^\d+$/.test(inputValue)) {
            // 如果不是纯数字，则移除最后一个字符
            $(this).val(inputValue.slice(0, -1));
            return; // 阻止后续执行
        }

        if (inputValue.length === 10) {
            submitButton.prop('disabled', false); // 启用按钮
        } else {
            submitButton.prop('disabled', true); // 禁用按钮
        }
    });
});

这段代码做了以下几件事：

$(document).ready(function() { ... });: 确保在 DOM 加载完成后执行代码。
$('#phoneNumber').on('input', function() { ... });: 监听 phoneNumber 输入框的 input 事件。input 事件在每次输入框内容发生变化时触发。
var inputValue = $(this).val();: 获取输入框的当前值。
var submitButton = $('#submitButton');: 获取提交按钮的 jQuery 对象，方便后续操作。
if (inputValue.length === 10) { ... } else { ... }: 检查输入值的长度是否等于 10。如果是，则使用 submitButton.prop('disabled', false) 启用按钮；否则，使用 submitButton.prop('disabled', true) 禁用按钮。
/^\d+$/.test(inputValue): 使用正则表达式验证输入值是否为纯数字，如果不是纯数字，则移除最后一个字符，保证输入框只接受数字输入。

完整代码示例

将 HTML 和 jQuery 代码结合起来，得到完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Validation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <form>
            <div class="form-group">
                <label for="phoneNumber">Phone Number</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">+ 91</span>
                    </div>
                    <input type="number" class="form-control" id="phoneNumber" name="phone_number" maxlength="10" required>
                </div>
            </div>
            <input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('#phoneNumber').on('input', function() {
                var inputValue = $(this).val();
                var submitButton = $('#submitButton');

                // 使用正则表达式检查是否为纯数字
                if (!/^\d+$/.test(inputValue)) {
                    // 如果不是纯数字，则移除最后一个字符
                    $(this).val(inputValue.slice(0, -1));
                    return; // 阻止后续执行
                }

                if (inputValue.length === 10) {
                    submitButton.prop('disabled', false); // 启用按钮
                } else {
                    submitButton.prop('disabled', true); // 禁用按钮
                }
            });
        });
    </script>
</body>
</html>

注意事项

正则表达式验证: 使用 /^\d+$/ 正则表达式确保输入框只接受数字输入，提高数据的准确性。
用户体验: 实时反馈（启用/禁用按钮）可以提升用户体验，让用户清楚地知道何时可以提交表单。
其他验证: 除了长度验证，还可以添加其他验证规则，例如验证是否为空、是否符合特定的数字格式等。
浏览器兼容性: 确保代码在各种主流浏览器上都能正常运行。

总结

通过使用 jQuery 监听输入框的 input 事件，我们可以轻松实现实时验证输入长度并动态控制按钮状态的功能。这种方法不仅简单易懂，而且能够提供良好的用户体验。可以根据实际需求修改代码，例如添加更复杂的验证规则或使用不同的 UI 框架。

以上就是使用 jQuery 验证输入框长度并启用/禁用按钮的详细内容，更多请关注其它相关文章！

# 移除 # 日照网络营销推广热线 # 大庆网站建设的步骤 # 恩施网站建设案例 # 台湾seo基础 # 保山网站优化建设代理 # 悉尼营销推广 # 巴南网站建设推广 # 安全狗seo # 龙华附近网站建设公司 # 山西胡氏荣茶的营销推广 # 在这个 # 是一个 # 显示效果 # 选择器 # 单选框 # css # 如果不是 # 表单 # 输入框 # red # .net # cdn # ai # 浏览器 # 正则表达式 # ajax # bootstrap # js # html # jquery

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：解决Bootstrap列在小屏幕上不工作的问题

下一篇：css bootstrap基础布局组件使用方法

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们