按钮禁用状态不会随required自动变化，因required不触发dom更新且:valid/:invalid对button无效；须监听form的input、change、submit事件，调用checkvalidity()手动同步disabled属性。
提交按钮的禁用状态不能只靠 required 属性自动同步——它不监听校验结果，也不响应 :valid 伪类；必须手动监听表单或字段的验证状态变化，并更新按钮的 disabled 属性。
为什么 button.disabled 不会随 required 自动变灰
required 本身不触发任何 DOM 状态更新，浏览器不会把 form.checkValidity() 的返回值映射到按钮上。即使所有必填字段为空，<button type="submit" disabled></button> 也不会自动加上 disabled；反之，用户填完后也不会自动移除。
-
:valid和:invalid伪类只作用于表单控件（input、select等），对button无效 -
form.oninput或input.addEventListener('input', ...)无法覆盖所有校验场景（比如用户删光内容后切走，再回来点提交） - 仅靠 CSS（如
form:invalid button）无法可靠控制disabled，因为该伪类不反映实时有效性，且兼容性差
推荐做法：监听 form 的 input + change + submit 事件统一刷新
最简健壮的方式是绑定三个事件，在任一输入变动或提交尝试时，重新评估整个表单有效性，并同步按钮状态。
- 监听
form的input和change事件（覆盖文本输入、选择、勾选等） - 额外监听
submit事件（防止用户绕过输入直接回车提交） - 在回调里调用
form.checkValidity()，然后设置button.disabled = !isValid - 注意：不要只监听单个
input，否则select或checkbox改变时可能漏掉
const form = document.querySelector('form');
const submitBtn = form.querySelector('button[type="submit"]');
const updateButtonState = () => {
const isValid = form.checkValidity();
submitBtn.disabled = !isValid;
};
form.addEventListener('input', updateButtonState);
form.addEventListener('change', updateButtonState);
form.addEventListener('submit', updateButtonState); // 防止回车跳过 input/change
容易被忽略的细节：disabled 按钮的样式需显式定义
浏览器默认对 button[disabled] 只做简单置灰，但很多项目用了自定义 CSS，此时必须主动写 button:disabled 样式，否则视觉上没变化。
- 别依赖
form:invalid button这类选择器——它不生效，且无法控制disabled属性 -
button:disabled是唯一可靠的 CSS 入口，可加背景色、透明度、指针事件禁用等 - 若按钮用了
aria-disabled，也要同步更新，辅助技术才可感知 - 移动端 Safari 对
disabled按钮的点击穿透行为不一致，建议加pointer-events: none显式封锁
动态 required 场景下必须重触发验证
当通过 JS 动态增删 required（比如切换“个人/企业”类型后让身份证号变为必填），form.checkValidity() 不会自动感知变更，需手动触发一次校验或重置状态。
- 修改
element.required = true/false后，调用element.reportValidity()可立即反馈当前状态 - 更稳妥的做法是在修改后，再次调用
updateButtonState()（即上面定义的函数） - 若字段被
disabled，它会被checkValidity()跳过——哪怕它带required，这点常被误认为“校验失效” -
setCustomValidity('')必须配对调用，否则旧错误会残留，影响checkValidity()返回值
真正麻烦的不是写几行 JS，而是记住：浏览器从不帮你把「校验结果」映射成「按钮状态」，这个桥接必须手写，且要覆盖所有触发路径——尤其是用户不敲键盘、只点鼠标或回车的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
