在前端表单交互场景中，根据输入框内容长度动态控制按钮的启用和禁用状态是非常常见的需求，比如用户注册时填写手机号、密码，只有输入符合长度要求才允许点击提交按钮。下面我们就用jQuery来实现这个功能。
实现思路
核心逻辑分为三步：
- 监听输入框的输入事件，包括键盘输入、粘贴、剪切等操作触发的输入变化
- 每次输入变化时获取输入框的当前内容长度，和预设的要求长度做对比
- 根据对比结果调用jQuery的
prop方法动态设置按钮的disabled属性
基础实现代码
首先我们需要准备基础的HTML结构，包含一个输入框和一个按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入框长度验证示例</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="username">用户名（至少3个字符）：</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<button id="submitBtn" disabled>提交</button>
<script>
$(function() {
// 监听输入框的输入事件，覆盖键盘输入、粘贴、剪切等场景
$('#username').on('input', function() {
// 获取输入框当前内容的长度
var inputLength = $(this).val().length;
// 设置最小要求长度为3
var minLength = 3;
// 判断长度是否符合要求
if (inputLength >= minLength) {
// 符合长度要求，启用按钮
$('#submitBtn').prop('disabled', false);
} else {
// 不符合长度要求，禁用按钮
$('#submitBtn').prop('disabled', true);
}
});
});
</script>
</body>
</html>代码说明
上面的代码中我们用到了几个关键点：
- 使用
$(function() {})确保DOM加载完成后再执行jQuery代码，避免元素还未加载就操作的问题 - 绑定
input事件而不是keyup事件，因为input事件可以覆盖粘贴、拖拽输入等不会触发键盘事件的场景，验证更全面 - 使用
prop方法而不是attr方法来设置disabled属性，因为disabled是元素的固有属性，prop操作更符合规范，也能正确反映元素的当前状态
扩展：多输入框验证场景
如果是多个输入框都需要验证才能启用按钮，只需要稍微调整逻辑即可：
$(function() {
// 定义需要验证的输入框选择器数组
var validateInputs = ['#username', '#password', '#email'];
// 最小长度要求，和输入框顺序对应
var minLengthMap = {
'#username': 3,
'#password': 6,
'#email': 5
};
// 统一的验证函数
function checkAllInputs() {
var allValid = true;
// 遍历所有需要验证的输入框
$.each(validateInputs, function(index, selector) {
var length = $(selector).val().length;
var minLength = minLengthMap[selector];
if (length < minLength) {
allValid = false;
return false; // 终止遍历
}
});
// 根据验证结果设置按钮状态
$('#submitBtn').prop('disabled', !allValid);
}
// 给所有需要验证的输入框绑定input事件
$.each(validateInputs, function(index, selector) {
$(selector).on('input', checkAllInputs);
});
});这样只要任意一个输入框的长度不符合要求，按钮就会保持禁用状态，所有输入框都符合要求后才会启用，适配更复杂的表单验证场景。