表单提交按钮的 disabled 状态必须用 JavaScript 动态控制，因 HTML5 无原生自动启禁用机制；需监听 input、change、animationend 等事件，结合 checkValidity() 和 required 字段遍历实时校验，并注意 autofill 延迟与服务端兜底。
表单提交按钮的 disabled 状态必须用 JavaScript 动态控制
HTML5 本身不提供“根据输入内容自动启用/禁用按钮”的原生机制。disabled 是布尔属性，只能靠 JS 监听输入事件（如 input、blur）实时判断条件并更新按钮状态。
监听 input 事件比 keyup 更可靠
input 事件能捕获所有值变更场景：键盘输入、粘贴、拖放、自动填充、语音输入，甚至剪贴板操作。而 keyup 会漏掉鼠标粘贴和 autofill。
- 对邮箱字段，检查
emailInput.checkValidity()比正则更准确（它走浏览器内置校验逻辑） - 多个必填字段时，不要逐个写
&&判断，改用Array.from(form.querySelectorAll('[required]')).every(el => el.value.trim()) - 避免在
input中频繁调用button.disabled = ...——现代浏览器优化得不错，但若表单极复杂，可加requestIdleCallback节流
autofill 触发时机晚，需监听 animationend 或 use change
Chrome 和 Edge 在 autofill 后不会立即触发 input，有时只发 change；Safari 可能延迟更久。稳妥做法是：
- 同时监听
input和change - 对
type="email"或type="tel"等字段，额外监听animationend（autofill 会触发一个隐藏动画） - 如果用了
autocomplete="on"，建议加一个微小延迟再校验，比如setTimeout(() => validate(), 10)
示例：带实时校验的登录表单按钮控制
const form = document.querySelector('#login-form');
const submitBtn = form.querySelector('button[type="submit"]');
const emailInput = form.querySelector('input[type="email"]');
const pwdInput = form.querySelector('input[type="password"]');
function updateSubmitState() {
const isEmailValid = emailInput.checkValidity() && emailInput.value.trim();
const isPwdValid = pwdInput.value.length >= 6;
submitBtn.disabled = !(isEmailValid && isPwdValid);
}
// 覆盖所有可能的输入变更路径
emailInput.addEventListener('input', updateSubmitState);
pwdInput.addEventListener('input', updateSubmitState);
emailInput.addEventListener('change', updateSubmitState);
pwdInput.addEventListener('change', updateSubmitState);
// 处理 autofill 延迟
emailInput.addEventListener('animationend', updateSubmitState);
pwdInput.addEventListener('animationend', updateSubmitState);
// 页面加载后立即校验（防止 autofill 已生效但没触发事件）
updateSubmitState();
注意：如果表单用了 novalidate，checkValidity() 就失效了，得自己写校验逻辑；另外，disabled 按钮不会触发表单的 submit 事件，但用户仍可能绕过 JS 直接提交——服务端校验不可省略。
立即学习“前端免费学习笔记（深入）”；
