需为 input 添加 required/type/pattern 等约束并设置 placeholder，配合 :invalid:not(:placeholder-shown) 实现输入后实时样式变化，避免未交互时误标红。
怎么用 :valid 和 :invalid 触发实时样式变化
浏览器原生表单验证的伪类在 Less 中能直接用，但很多人写完发现没反应——核心原因是没加 novalidate 属性或忘了设置 required / type 等触发条件。
Less 里嵌套写法很干净，但必须确保 HTML 元素真正处于可验证状态：
-
input必须有required、type="email"或pattern等约束，否则:invalid永远不会激活 - 如果用了
form提交逻辑，又没加novalidate，浏览器会在提交时强制校验并跳转，掩盖了实时交互效果 - 某些旧版 Safari 对
:user-invalid支持更好，但:invalid在输入后立即生效，更适合实时反馈
示例：
.form-control {
border: 1px solid #ccc;
&:valid {
border-color: #28a745;
}
&:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
}
为什么 &:focus 和 &:invalid 要组合判断
单独用 :invalid 会导致刚点进空输入框就标红——用户还没输，不该提前报错。关键是区分“未交互”和“已输入但错误”两种状态。
Less 嵌套中用 :not(:placeholder-shown) 是最轻量的判断方式，它依赖 placeholder 存在且未被遮盖：
- 必须给
input设置placeholder属性，否则:placeholder-shown永远为 false - Chrome/Firefox 支持良好，IE 完全不支持，如需兼容得 fallback 到 JS 控制 class
- 不要用
:focus-within替代，它作用于父容器，无法精准反映当前输入是否出错
Less 嵌套里怎么避免伪类选择器权重爆炸
写深了容易生成像 .form .group input:focus:invalid 这种高权重要求，覆盖不了组件库默认样式，或者被第三方 CSS 覆盖掉。
控制权重的关键是「提前收口」：
- 别在最外层 class 下无限嵌套伪类，比如
.form-control:hover:focus:invalid:required—— 这种写法既难读又难调试 - 优先用属性选择器收束，例如
input[required]:invalid比.form-control:invalid更明确、权重更可控 - 如果用了 CSS-in-JS 或 Shadow DOM，伪类可能失效，这时得靠 JS 添加
is-invalid类替代
自定义验证失败提示要不要用 ::after 伪元素
可以，但要注意伪元素不能响应点击或聚焦，也不能读屏——对无障碍不友好。而且 content 里没法插 HTML，纯文本提示能力有限。
更稳妥的做法是配合 aria-live 和真实 DOM 节点：
- Less 中用
&:invalid:not(:placeholder-shown) + .error-message控制兄弟节点显隐，比伪元素更可控 - 如果坚持用
::after，content只能是字符串或 attr()，比如attr(data-error)，但 IE 不支持 attr() 用于content - 伪元素定位依赖父元素
position: relative，漏写就会飘到页面左上角
验证交互真正的复杂点不在样式嵌套，而在「什么时候该显示错误」——用户删光内容后，是保持红框？还是等再次失焦才清掉？这个时机得由业务逻辑定，Less 只负责承接状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
