本文介绍了如何使用 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 来实现输入框内容变化的监听和按钮的启用。
$(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 库、修改选择器、支持复制粘贴等。
