:valid/:invalid在输入框渲染后立即触发验证，因浏览器默认检查初始值是否符合约束；解决方法是仅在用户交互后启用样式反馈，如用:user-invalid或JS添加data-touched标记。
为什么 :valid/:invalid 在输入框刚聚焦时就触发？
因为浏览器默认会在 <input> 初始渲染后立即检查其值是否符合 required、type="email"、pattern 等约束，哪怕用户还没输过任何内容。比如一个空的 required 文本框，加载即为 :invalid —— 这会让用户一打开页面就看到红色边框，体验突兀。
解决办法是：只在用户「交互过」后才启用样式反馈。常用策略是结合 :user-invalid（较新，Chrome 102+ 支持）或用 JavaScript 打标记：
- 监听
input或blur事件，给元素添加data-touched="true" - CSS 写成
input[data-touched="true"]:invalid { border-color: #e53e3e; } - 避免用
:focus-within混合判断，它无法区分“首次聚焦”和“已修改后再次聚焦”
type="email" 和 pattern 的验证行为差异
type="email" 的 :invalid 触发很宽松：只要不为空且含一个 @ 就算通过（如 a@b），而 pattern 是严格正则匹配，且空值默认不触发 :invalid（除非加 required）。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
-
<input type="email" pattern=".+@.+\..+" required>—— 多余。type=email 已自带基础校验，pattern 会叠加，但浏览器优先用 type 规则，pattern 可能被忽略 -
pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"要注意：正则开头结尾无需^$，HTML pattern 自动全量匹配 - 手机号等自定义格式必须用
pattern+required，否则空值不会进:invalid
:valid/:invalid 样式在 submit 时失效？
不是失效，是浏览器在表单提交瞬间重置了验证状态（尤其当 submit 导致页面刷新）。更关键的是：:valid 和 :invalid 仅反映当前 DOM 值是否满足约束，不保留历史状态。
所以别依赖它们做「提交后提示」：
- 提交失败后想高亮错误字段？得用 JS 检查
form.checkValidity()，再手动加类，比如input.is-error -
:invalid无法区分「格式错」和「必填未填」，而validity.valueMissing、validity.typeMismatch可以，需 JS 配合 - 如果用了
novalidate属性，:valid/:invalid完全不工作 —— 浏览器跳过原生验证
兼容性与性能要注意什么？
:valid 和 :invalid 在所有现代浏览器都支持（IE10+），但有个隐藏成本：每次输入都会触发重排重绘，尤其当样式涉及 box-shadow 或复杂渐变时，滚动或快速输入可能卡顿。
优化建议：
- 只改
border-color、outline或小范围background-color，避免触发布局计算 - 避免在
:invalid中写transition: all .3s—— 输入过程中连续触发，动画队列堆积 - 移动端 Safari 对
:user-invalid支持滞后，若需精准控制「用户修改后才验证」，JS 打标仍是更稳方案
真正难的不是写对这两个伪类，而是拿捏「何时开始验证」和「如何与 JS 校验逻辑对齐」—— 浏览器的原生验证只是起点，不是终点。
