可通过监听input事件实时校验必填字段，调用isFormValid()判断所有required元素value.trim()是否非空，据此启用提交按钮；需处理初始状态、动态字段及类型校验等边界情况。
可以通过监听表单内所有输入元素的 input 事件，实时校验每个字段是否非空（或满足业务规则），全部有效时启用提交按钮。
监听输入变化并统一校验
给每个 <input>、<select>、<textarea> 绑定 input（或 change）事件，每次触发时检查所有必填项是否已填写：
- 推荐用
input事件，能实时响应用户输入（包括粘贴、删除等） - 对每个字段取
.value.trim()判断是否为空，避免只输空格的情况 - 可统一用
document.querySelectorAll('input[required], select[required], textarea[required]')获取所有必填项
封装校验逻辑，避免重复代码
写一个函数如 isFormValid()，遍历所有必填字段并返回布尔值：
function isFormValid() {
const requiredFields = document.querySelectorAll('[required]');
return Array.from(requiredFields).every(el =>
el.value?.trim() !== ''
);
}
在每次输入后调用它，并根据结果设置按钮的 disabled 属性：
const submitBtn = document.getElementById('submit-btn');
const inputs = document.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
input.addEventListener('input', () => {
submitBtn.disabled = !isFormValid();
});
});
注意兼容性和边界情况
部分场景需额外处理：
-
初始状态：页面加载后立即执行一次
isFormValid()，确保按钮初始禁用状态正确 - 动态字段：如果表单支持增删行（如多地址），需在 DOM 变化后重新绑定或使用事件委托
-
类型校验：如邮箱、手机号等，可在
isFormValid()中扩展正则判断，不只看是否为空 -
下拉框（select）：默认选项建议设为
<option value="">请选择</option>，方便统一判空
更简洁的现代写法（可选）
利用表单原生 API 和 CSS 伪类，减少 JS 逻辑：
- 给表单加
novalidate，避免浏览器默认校验干扰 - 用
form.checkValidity()配合required属性自动校验（但不支持自定义提示或复杂规则） - CSS 中用
form:valid button[type="submit"] { opacity: 1; cursor: pointer; }控制样式（视觉上启用，仍需 JS 控制disabled防误提交）
