不能只靠 :valid 感知长度，必须用 pattern 将长度约束转为正则，再配合 :valid/:invalid 控制边框色；因 minlength/maxlength 不触发该伪类，仅 required/type/pattern 才驱动状态变化。
直接结论：不能只靠 :valid 感知“长度”，必须用 pattern 把长度约束转成正则，再配合 :valid 或 :invalid 控制边框色。
为什么 :valid 对纯长度没反应？
浏览器不会主动检查「输入了多少字符」——:valid 只响应 Constraint Validation API 的结果，而该 API 默认不校验长度，除非你显式声明规则。一个 <input type="text"> 即使写了 :valid { border: 2px solid green; }，也永远不生效，因为它没有验证依据。
-
minlength和maxlength属性本身**不触发:valid/:invalid**（这是很多人踩坑的根源） - 真正能驱动状态变化的是
required、type（如email）、pattern这三类属性 - 所以想按长度变色，唯一标准路径是：用
pattern写正则，把长度逻辑“编译”进去
pattern 怎么写才匹配长度？
pattern 值是正则字面量，不带前后斜杠，且只在非空时参与校验（空值默认无效，除非没加 required）。
- 至少 3 个字符：
<input required pattern=".{3,}"> - 恰好 6 位数字：
<input required pattern="\d{6}"> - 4–8 位字母或数字：
<input required pattern="[a-zA-Z0-9]{4,8}"> - ⚠️ 错误写法：
pattern="/.{3,}/"（多出的/会让整个 pattern 失效） - ⚠️ 注意：如果没加
required，用户删空后会回到:valid（因空值对.{3,}是“不校验”而非“不通过”），建议始终搭配required
边框色怎么设才不被覆盖、不误触发？
光写 input:valid { border-color: green; } 很容易失效，原因常出在时机和优先级上。
- 初始加载时，
required字段为空 → 立刻匹配:invalid→ 边框变红。这不是 bug，是规范行为 - 想避免一上来就红？用
input:not(:placeholder-shown):invalid（前提是设置了placeholder），或更稳妥的input:user-invalid（Chrome 102+ / Firefox 119+ / Safari 17.4+ 支持） - 内联样式或 UI 框架的 reset.css 常重置
border，导致你的颜色不显示。检查 computed styles 中最终生效的border-color，必要时加!important或提高选择器特异性，比如input[required][pattern]:valid - 别给
:invalid加transition：用户刚打一个错字就渐变红，体验压迫感强。可只给:valid或:focus加过渡
JS 自定义长度校验时，:valid 为何不动？
手动用 JS 判断字符串长度（比如 input.value.length ），然后改 class 或样式，<code>:valid 完全无感——它只认 setCustomValidity() 设置的状态。
- 校验失败时调用
input.setCustomValidity("too short") - 校验通过时必须调用
input.setCustomValidity("")（传空字符串，不是null或undefined） - 漏掉一次
setCustomValidity("")，状态就卡死在:invalid，后续任何输入都不恢复 - 不需要
reportValidity()强制弹窗时，只调setCustomValidity就够了；它会立即更新伪类匹配状态
真正难的不是写 CSS，而是让浏览器「知道你在校验什么」以及「什么时候该信这个结果」——pattern 是桥梁，setCustomValidity 是开关，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
