提交按钮需初始禁用并动态激活，核心是监听input/blur事件调用form.checkValidity()实时判断有效性，同步更新disabled、aria-disabled及data-valid属性，自定义校验前须清空setCustomValidity()旧状态。
表单校验通过后才激活提交按钮，核心是监听字段状态变化，动态判断整体有效性，并同步控制按钮的 disabled 属性和视觉样式。不能依赖 submit 事件——那太晚了；也不能只靠 required 初始状态——用户还没输时按钮就该禁用，但得等真实交互后才开始判断。
按钮初始必须禁用，且明确标记不可用
页面加载时，所有必填字段为空，表单显然无效。此时提交按钮应默认 disabled，并建议加上 aria-disabled="true" 和合适的视觉样式（如低透明度、灰色）：
<button type="submit" disabled aria-disabled="true">提交</button>- 避免用 CSS 隐藏或仅靠 class 控制可用性，disabled 属性才是语义和行为双重保障
- 不写
type="submit"会导致按钮无法触发原生校验，务必显式声明
监听 input 和 blur 事件做实时有效性聚合
每次用户输入或离开字段，都重新检查整个表单是否全部有效。用 form.checkValidity() 最直接，它返回布尔值，且会触发各字段的 :valid/:invalid 状态更新：
- 对每个
<input>、<select>、<textarea>绑定input（适合格式类校验）和blur（适合一致性类校验，如两次密码） - 在事件处理函数中调用
form.checkValidity()，根据结果设置按钮：submitBtn.disabled = !isValid - 别忘了同时更新
aria-disabled：若!isValid，设为"true"；否则设为"false"
处理自定义校验时清空旧状态
如果用了 setCustomValidity() 做手动校验（比如用户名已存在），每次重新校验前必须先调用 el.setCustomValidity('')，否则旧错误会卡住，checkValidity() 一直返回 false：
立即学习“前端免费学习笔记（深入）”；
- 例如在邮箱输入框的
blur里，先emailInput.setCustomValidity('')，再执行异步查重逻辑 - 查重失败后，再
emailInput.setCustomValidity('该邮箱已被注册') - 这样后续调用
form.checkValidity()才能正确反映当前状态
视觉反馈要与状态严格同步
按钮变亮（比如背景色转蓝、文字加粗）只是辅助信号，关键是要让用户感知“现在可以点了”。除了启用 disabled，还建议：
- 添加
data-valid="true/false"属性，方便 CSS 用属性选择器控制样式：button[data-valid="true"] { background: #007bff; } - 配合字段级反馈：当某个输入框失效时，其父容器加
is-invalid类，按钮旁可加小提示“请修正标红项” - 移动端注意：按钮激活状态需明显，避免用户误以为页面卡死
