submit按钮无法用:valid伪类高亮，因其不参与校验；需用checkvalidity()监听input/blur事件动态控制disabled状态，并通过:not(:disabled)实现css高亮。
HTML表单原生校验下，submit 按钮无法靠 :valid 伪类自动高亮
因为 <button type="submit"></button> 本身不参与表单校验（它没有 required、pattern 等属性），所以 button:valid 永远不匹配。浏览器不会把提交按钮的校验状态和整个表单绑定——这是初学者最常卡住的地方。
真正能响应校验状态的是表单内各 <input>、<select></select>、<textarea></textarea> 元素。要让按钮“在校验通过后高亮”，必须监听这些元素的状态变化，再手动控制按钮样式。
用 checkValidity() + addEventListener('input') 实时判断
核心思路：不等点击，而是在用户每次输入后，检查整个表单是否通过校验，再切换按钮的 disabled 属性或 class。
-
form.checkValidity()返回true表示所有带校验属性的字段都满足条件（注意：它不触发错误提示，只做判断） - 监听
input事件比change更及时，尤其对实时反馈友好 - 别忘了监听
blur，防止用户跳过某字段直接点按钮（比如粘贴后没触发input）
CSS 高亮建议用 :disabled 反向控制，而非 :valid
直接给按钮写 button:not(:disabled) { background: #007bff; } 最稳妥。不要试图用 form:valid button —— 这个选择器在所有主流浏览器中都不生效，因为 :valid 不能作用于 <form></form> 元素（它不是可校验元素）。
- Chrome/Firefox/Safari 均不支持
form:valid或form:invalid - 如果想加动画或过渡效果，给
button加transition: opacity 0.2s, background 0.2s - 禁用状态下建议保留指针样式：
button:disabled { cursor: not-allowed; }
注意隐藏但必填字段（如 type="hidden"）会干扰 checkValidity()
如果表单里有 <input type="hidden" required>，checkValidity() 会始终返回 false，因为 hidden 字段永远为空且不可编辑。这种设计几乎总是错的。
- 删掉 hidden 字段的
required—— 它本就不该由用户填写 - 如果后端强依赖某个值，应在 JS 提交前注入，或用服务端校验兜底
- 调试时可用
console.log([...form.elements].filter(el => el.checkValidity === undefined || el.checkValidity()))快速定位哪些元素被纳入校验
真实项目里，表单往往混着动态字段、异步校验、自定义规则，这时候 checkValidity() 只能覆盖基础层。需要高亮按钮，本质是维护一个“可提交”状态机，而不仅是 CSS 技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
