在前端表单交互中，限制按钮的启用状态是提升用户体验、减少无效请求的常见操作。当我们需要让输入框输入满10位数字才启用按钮时，使用jQuery可以很方便地实现这个需求。
实现思路
整个功能的实现可以分为三个核心步骤：
- 给输入框绑定输入相关的事件，监听用户输入内容的变化
- 每次输入变化后，获取输入框的内容，校验是否为10位纯数字
- 根据校验结果，动态设置按钮的禁用或启用状态
核心代码实现
HTML结构
首先准备基础的页面结构，包含一个输入框和一个按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入框10位数字启用按钮</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="phoneInput">请输入10位数字：</label>
<input type="text" id="phoneInput" placeholder="请输入10位数字">
<button id="submitBtn" disabled>提交</button>
</div>
</body>
</html>jQuery逻辑代码
接下来编写jQuery代码，实现校验和状态切换的逻辑：
$(function() {
// 获取输入框和按钮的jQuery对象
var $phoneInput = $('#phoneInput');
var $submitBtn = $('#submitBtn');
// 绑定输入事件，监听输入框内容变化
$phoneInput.on('input', function() {
// 获取输入框的值，去除前后空格
var inputVal = $(this).val().trim();
// 定义正则，匹配10位纯数字
var tenDigitReg = /^\d{10}$/;
// 校验输入内容
if (tenDigitReg.test(inputVal)) {
// 符合10位数字，启用按钮
$submitBtn.prop('disabled', false);
} else {
// 不符合要求，禁用按钮
$submitBtn.prop('disabled', true);
}
});
});代码说明
这里有几个需要注意的点：
- 使用
input事件而不是keyup事件，因为input事件可以监听粘贴、拖拽输入等所有内容变化的情况，覆盖更多场景 - 校验正则
/^\d{10}$/中，^表示字符串开头，\d表示数字，{10}表示恰好10位，$表示字符串结尾，确保输入内容完全是10位数字，不会包含其他字符 - 设置按钮禁用状态时，使用
prop('disabled', true/false)而不是attr，因为disabled是元素的属性，用prop操作更符合jQuery的规范，也能避免一些状态同步问题
扩展优化
如果需要在用户输入过程中实时提示错误信息，可以在校验失败时添加提示元素：
$(function() {
var $phoneInput = $('#phoneInput');
var $submitBtn = $('#submitBtn');
// 创建提示元素
var $tip = $('');
$phoneInput.after($tip);
$phoneInput.on('input', function() {
var inputVal = $(this).val().trim();
var tenDigitReg = /^\d{10}$/;
if (inputVal === '') {
$tip.text('请输入内容');
$submitBtn.prop('disabled', true);
} else if (!tenDigitReg.test(inputVal)) {
$tip.text('请输入10位纯数字');
$submitBtn.prop('disabled', true);
} else {
$tip.text('');
$submitBtn.prop('disabled', false);
}
});
});这样就可以在用户输入不符合要求时给出明确的提示，进一步提升交互体验。整个实现逻辑简单清晰，适配大多数需要基于输入内容控制按钮状态的场景。