如何确保CSS中:valid和:invalid样式在表单校验中有效应用？

本文共计639个文字，预计阅读时间需要3分钟。

最常见原因是表单控件未启用原生验证——它们只对带required、type等属性有效。

必须设置验证属性才能触发状态切换

没有验证约束，:valid 始终为 true（初始状态），:invalid 永远不匹配。要让样式动态响应，至少得加一个验证条件：

• required：非空校验（最轻量）
• type="email"、type="url"、type="number"：类型校验
• pattern：正则匹配（如 pattern="[0-9]{6}"）
• min/max（配合 type="number" 或 "date"）

例如：<input type="email" required> 才会让输入非法邮箱时激活 :invalid。

用户未交互前样式可能不更新

多数浏览器采用“懒校验”策略：初始加载时元素默认为 :valid，直到用户聚焦（:focus）再失焦（:blur），或提交表单（submit）时才首次计算状态。