按钮不能用 :invalid 伪类高亮，需在 submit 事件中调用 checkvalidity() 并动态添加 has-error 类；必须配合字段级反馈（如 is-invalid 类、aria-invalid 属性），且严禁使用 form.submit() 绕过验证。
按钮本身不是验证主体，不能直接用 :invalid
HTML 表单验证只作用于可验证的控件：<input>、<select></select>、<textarea></textarea>。按钮（<button type="submit"></button> 或 <input type="submit">）没有 validity 对象，也不响应 :invalid 伪类——所以写 button:invalid { background: red; } 永远不会生效。
常见误解是想“让提交按钮变红表示表单有错”，但浏览器不提供这个原生机制。必须靠 JS 主动判断并添加 class。
高亮按钮的正确触发时机是 submit 事件拦截后
不能等用户点完按钮再查——那已经晚了；也不能在每个 input 的 blur 时就高亮按钮，容易误判（比如用户刚点进邮箱框还没输，按钮就红了）。
- 监听表单的
submit事件，调用e.preventDefault() - 立即执行
form.checkValidity()，它返回false说明至少一个字段失败 - 根据结果给按钮加或删
has-error类：submitBtn.classList.toggle('has-error', !isValid) - 别忘了同时移除旧状态：如果之前失败过但这次通过，必须清除 class，否则残留高亮
按钮高亮要配合字段级反馈，否则用户不知问题在哪
单独红一个按钮，对用户毫无意义。它只能作为“整体校验失败”的视觉锚点，真正要解决的是定位错误字段。
- 遍历
form.elements，对每个!el.checkValidity()的元素，添加is-invalid类到其父容器（如.form-group） - 同步设置
el.setAttribute('aria-invalid', 'true')和el.setAttribute('aria-describedby', 'error-id') - 按钮高亮只是辅助信号，主反馈必须落在具体字段上——否则屏幕阅读器和键盘用户会完全迷失
- 移动端尤其要注意：按钮位置可能远离出错字段，单靠按钮变色无法建立空间关联
requestSubmit() 能绕过按钮高亮逻辑吗？
可以，但不该这么用。form.requestSubmit() 会触发原生验证流程并派发 submit 事件，和点击 type="submit" 按钮行为一致。只要你在 submit 事件里统一处理，按钮高亮逻辑就仍然有效。
真正危险的是直接调用 form.submit() ——它跳过所有 HTML5 验证，也跳过你的 submit 监听器，按钮永远不会知道出错了。这种写法必须杜绝。
复杂点在于：按钮高亮不是独立功能，它必须嵌入整个验证状态生命周期里——从字段失焦、到提交拦截、再到后端返回错误再重绘，每一步都影响它的显隐。漏掉任意一环，就会出现“按钮红了但找不到哪错”或“明明错了按钮却没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
