表单提交按钮的 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 直接提交——服务端校验不可省略。