如何使用 jQuery 在输入框满足 10 位数字时启用按钮-html教程-PHP中文网

如何使用 jQuery 在输入框满足 10 位数字时启用按钮

花韻仙語

发布： 2025-10-12 12:18:01

原创

443人浏览过

如何使用 jquery 在输入框满足 10 位数字时启用按钮

本文介绍了如何使用 jQuery 实时监测输入框的数字位数，当输入框中的数字达到 10 位时，自动启用提交按钮。通过监听 `keypress` 事件并结合正则表达式进行验证，可以实现这一功能，提升用户体验。文章提供了详细的代码示例和注意事项，帮助开发者快速实现该功能。

在 Web 开发中，经常会遇到需要验证用户输入的情况。例如，在注册或登录时，需要验证手机号码是否符合规范。本文将介绍如何使用 jQuery 监听输入框的输入，并在输入框中的数字达到 10 位时，自动启用提交按钮。

HTML 结构

首先，我们需要一个包含输入框和提交按钮的 HTML 结构。以下是一个简单的示例：

<div class="form-group">
    <label for="exampleInputEmail3">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="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
    </div>
</div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">

登录后复制

在这个例子中，我们使用了一个 input 元素作为数字输入框，id 为 pnum，并设置了 maxlength="10" 限制输入的最大长度为 10。oninput 属性用于在每次输入时移除非数字字符。提交按钮的 id 为 submitButton，初始状态为禁用 (disabled)。

jQuery 实现

接下来，我们将使用 jQuery 来实现输入框内容变化的监听和按钮的启用。

AppMall应用商店

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

查看详情

$(document).ready(function() {
  $('#pnum').on('input', function(e) {
    const value = e.target.value;
    var regex = new RegExp("^[0-9]{10}$"); // 正则表达式匹配10位数字
    if (regex.test(value)) {
      $('#submitButton').prop('disabled', false); // 启用提交按钮
    } else {
      $('#submitButton').prop('disabled', true); // 禁用提交按钮
    }
  });
});

登录后复制

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

$(document).ready(function() { ... });: 确保在文档加载完成后执行 jQuery 代码。
$('#pnum').on('input', function(e) { ... });: 监听 id 为 pnum 的输入框的 input 事件。input 事件在每次输入框内容发生变化时触发。
const value = e.target.value;: 获取输入框的当前值。
var regex = new RegExp("^[0-9]{10}$");: 创建一个正则表达式，用于匹配 10 位数字。 ^ 表示字符串的开始，[0-9] 表示匹配 0-9 的数字，{10} 表示匹配 10 次，$ 表示字符串的结束。
if (regex.test(value)) { ... }: 使用正则表达式测试输入框的值是否符合 10 位数字的格式。
$('#submitButton').prop('disabled', false);: 如果输入框的值符合 10 位数字的格式，则移除 submitButton 按钮的 disabled 属性，启用按钮。
$('#submitButton').prop('disabled', true);: 否则，添加 disabled 属性，禁用按钮。

完整代码示例

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

<!DOCTYPE html>
<html>
<head>
    <title>Enable Button on 10 Digits Input</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label for="exampleInputEmail3">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="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
            </div>
        </div>
        <input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">
    </div>

    <script>
        $(document).ready(function() {
            $('#pnum').on('input', function(e) {
                const value = e.target.value;
                var regex = new RegExp("^[0-9]{10}$");
                if (regex.test(value)) {
                    $('#submitButton').prop('disabled', false);
                } else {
                    $('#submitButton').prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>

登录后复制

注意事项

确保引入 jQuery 库。
根据实际情况修改 HTML 结构和 jQuery 选择器。
可以使用不同的正则表达式来匹配不同的输入格式。
如果需要支持复制粘贴，可以同时监听 paste 事件。
可以使用 trim() 方法去除输入框值两端的空格，避免空格影响验证结果。

总结

本文介绍了如何使用 jQuery 监听输入框的输入，并在输入框中的数字达到 10 位时，自动启用提交按钮。通过监听 input 事件并结合正则表达式进行验证，可以实现这一功能，提升用户体验。这种方法可以应用于各种需要验证用户输入的场景，例如注册、登录、表单提交等。记住，要根据实际需求调整代码，并注意一些细节问题，例如引入 jQuery 库、修改选择器、支持复制粘贴等。

以上就是如何使用 jQuery 在输入框满足 10 位数字时启用按钮的详细内容，更多请关注php中文网其它相关文章！