浏览器原生 :valid/:invalid 伪类仅在表单提交或元素失焦时更新，非实时；需通过 input 事件监听并调用 checkValidity() 手动触发校验，再用 classList.toggle 同步状态。
input:valid 和 input:invalid 怎么触发校验
浏览器原生校验只在表单提交或元素失去焦点时才更新 :valid / :invalid 状态，不是实时的。比如用户刚输错一个邮箱，:invalid 不会立刻生效，得等 blur 或 submit。
想让它“边输边校验”，必须手动调用 checkValidity() 并强制重绘——但注意：直接改 input.validity 是只读的，不能硬写。
- 给
input绑定input事件，每次触发后调用element.checkValidity() - 再用
element.reportValidity()可选地弹出默认提示（但会打断体验，慎用） - 更稳妥的做法是：用
classList.toggle('invalid', !element.checkValidity())手动同步状态类 - 别依赖
:user-invalid——它只在用户交互后生效，且 Safari 支持不稳
required、pattern、type 这些属性怎么影响伪类行为
required 是最基础的触发条件：空值 + required = :invalid；但空值 + 无 required = 默认 :valid，哪怕字段本该填。
type="email" 或 type="url" 会启用内置格式校验，但它们对空字符串一律放行（即空 email 仍算 :valid），除非加了 required。
立即学习“前端免费学习笔记（深入）”；
-
pattern必须配合title才能在 reportValidity() 时显示友好提示，否则只报“请与所要求的格式匹配” -
minlength/maxlength对:invalid生效，但min/max在 type="number" 下才起作用 - 自定义校验（比如手机号二次验证）必须用
setCustomValidity()，设空字符串才恢复原生状态
用 :focus-within 搭配 label 实现动态提示框
单纯靠 :focus 控制提示文字太弱——label 本身不支持 focus，但父容器可以。把 label 和 input 包进一个 div，再用 :focus-within 就能联动。
这个技巧特别适合做“输入时浮现帮助文案”或“错误时高亮整个输入区块”。但要注意：IE 完全不支持 :focus-within，需 fallback 到 JS 监听 focus/blur。
- HTML 结构必须是
<div class="field"> <label>...</label><input> </div>，不能用for/id跨容器绑定 -
:focus-within会响应子元素任何 focus 行为，包括内部按钮、下拉菜单，可能误触发 - 搭配
transition: all 0.15s时，避免对opacity做过渡——部分浏览器在:invalid切换时会跳帧
CSS 伪类校验和 JS 校验混用时的冲突点
当 JS 调用 setCustomValidity('') 清空错误，:invalid 状态不会自动消失，因为浏览器认为“校验通过”和“无自定义错误”是两回事。
真实场景里，JS 常用来做异步校验（如用户名是否已存在），而 CSS 伪类只管同步规则。两者叠加时，视觉状态很容易滞后或矛盾。
- 每次 JS 校验结束，必须显式调用
input.checkValidity()再操作 class，不能只靠 classList 切换 - 不要在 JS 中直接移除
input的required属性来“绕过校验”——这会让:valid突然变 true，但 DOM 状态已乱 - 移动端 keyboard 弹出时，
:focus可能延迟触发，导致:focus-within失效，建议加ontouchstart兜底
伪类校验看着轻量，但一旦涉及异步、多字段联动、兼容性兜底，就很容易变成状态管理黑洞。最稳的方式是：CSS 只负责“有错误时怎么画”，校验逻辑全交给 JS 控制 class。
