使用 jQuery 验证输入框长度并启用/禁用按钮-html教程-PHP中文网

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

花韻仙語

发布： 2025-10-12 08:17:29

原创

636人浏览过

使用 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 来实现实时验证和按钮状态切换的逻辑。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

$(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 验证输入框长度并启用/禁用按钮的详细内容，更多请关注php中文网其它相关文章！