直接用 :invalid 会一加载就红，因为空值+required立即匹配；需用js控制时机，:user-invalid更合适但兼容性差，推荐input:invalid:user-invalid加input.invalid类兜底。
为什么直接用 :invalid 会一加载就红？
页面刚打开，所有 required 字段就带红边框，是因为 :invalid 是实时计算的：空值 + required = 立刻匹配。用户还没动过字段，视觉上却像已出错。这不是 bug，是规范行为。
真正想表达“用户提交后才标记错误”，得靠 JS 控制时机，而不是依赖伪类自动响应。CSS 只负责样式，逻辑交给 JS。
-
:user-invalid更接近需求——它只在用户交互（focus/blur/输入后删除）且校验失败时生效，但 IE 完全不支持，Edge 105+ 才稳定 - 生产环境稳妥写法是
input:invalid:user-invalid，再加兜底：input.invalid类由 JS 主动添加 - 别用
input:invalid:not(:placeholder-shown)拦截初始状态——textarea和select不支持:placeholder-shown，容易漏掉
提交时怎么精准高亮所有必填失败字段？
监听 submit 事件，调用 form.checkValidity()，再遍历字段手动加 class。不能只靠 CSS，因为后端返回的业务错误（如“用户名已被占用”）完全无法被 :invalid 捕获。
- 先
e.preventDefault()阻止默认提交，否则页面跳转或刷新会中断反馈 - 用
form.querySelectorAll('input[required], select[required], textarea[required]')获取所有必填控件，避免漏掉select或textarea - 对每个字段调用
el.checkValidity()，失败则el.classList.add('invalid')；成功则el.classList.remove('invalid') - 同步处理配套元素：给父容器加
has-error，设置aria-invalid="true"，并关联aria-describedby指向错误文案
按钮高亮为什么总不生效？
button:invalid 永远不会触发——按钮不是可验证控件，没有 validity 对象，浏览器根本不给它计算 :invalid 状态。
必须用 JS 判断表单整体有效性，再手动切换按钮 class：
- 在
submit事件里执行const isValid = form.checkValidity() - 然后
submitBtn.classList.toggle('has-error', !isValid) - 注意：如果之前失败过、这次通过了，必须清除 class，否则残留高亮
- 严禁用
form.submit()手动提交——它绕过所有 HTML5 验证和你的监听器，按钮永远收不到信号
移动端和无障碍容易忽略的点
视觉高亮只是表层，真正影响可用性的是状态同步和语义表达。
- Safari 在 iOS 上对
:invalid响应有半秒延迟，失焦后不立刻变色；用 JS 主动加 class 能规避 - 屏幕阅读器依赖
aria-invalid和aria-describedby，光改 border 颜色对它们无效 - 表格内表单字段（如
contenteditable单元格）需监听input而非blur，否则用户输一半就被标错 - 服务端返回错误字段名时，别硬匹配
id；统一约定用name属性或data-field-key，避免前后端字段命名差异导致找不到 DOM
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
