:invalid 和 :valid 伪类需配合 required、type、pattern 等 html5 验证属性才生效，初始空值触发 :invalid 是规范行为；推荐用 :user-invalid 控制反馈时机，或 js 主动添加 is-valid/is-invalid 类实现可控校验。
直接用 :invalid 和 :valid 无法实现真正“实时”反馈，它们只响应浏览器原生验证状态的变更，且初始空值就会触发 :invalid —— 所以一加载就红边框不是 bug，是规范行为。要达到用户预期的合理视觉反馈，关键在于控制触发时机，而不是单纯依赖伪类本身。
必须配合 HTML5 验证属性才能生效
这两个伪类不会凭空工作，需明确告诉浏览器“什么算非法”。以下任一属性都会激活验证逻辑：
-
required：空值即视为无效 -
type="email"、type="url"、type="number"等：按类型规则校验 -
pattern：匹配正则表达式 -
min/max、minlength/maxlength：数值或长度限制
例如：<input type="email" required> 才会让 input:invalid 在输入 test@ 时匹配；若只是 type="text"，输错邮箱也不会变红。
避免“一进页面就红”的误触发
空的 required 输入框默认就是 :invalid，直接写 input:invalid { border-color: red; } 会导致所有必填项刚打开就红边。解决思路是延迟样式应用，等用户真实操作后再反馈：
- 用
:user-invalid（推荐）：仅在用户失焦、提交或修改后才生效，体验更自然。写法：input:user-invalid { border-color: red; } - 兼容老浏览器时，可用
:not(:focus)+ JS 监听blur或submit后添加class="invalid"类 - 排除 placeholder 显示状态：
input:invalid:not(:placeholder-shown)，适合有 placeholder 的非 required 字段
搭配 :valid 实现完整状态闭环
:valid 同样受约束属性驱动，但要注意：非 required 字段（如 type="email"）初始为空时是 :valid，因为“空”不违反邮箱规则。所以建议组合使用：
-
input:valid:not(:placeholder-shown) { border-color: #28a745; }：仅当有内容且合法时显绿色 -
input:invalid:user-invalid { border-color: #dc3545; }：用户操作后才标红 - 聚焦时统一加深边框：
input:focus { border-color: #007bff; }，避免红/绿与焦点色冲突
更可控的替代方案：显式状态类
主流 CSS 框架（如 Bootstrap）不依赖伪类，而是用 JavaScript 主动添加 is-valid / is-invalid 类。好处是：
- 验证时机完全可控（比如输入时、失焦时、提交时）
- 可融合自定义规则（如用户名是否被占用）
- 样式和逻辑解耦，便于维护和测试
例如监听 input 事件实时校验：el.addEventListener('input', () => { el.classList.toggle('is-invalid', !el.checkValidity()); });
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
