input:user-invalid 是最轻量稳定的高亮方式，需满足用户已交互、form无novalidate、input含验证属性三条件；2026年起主流浏览器全覆盖，推荐完整border声明并注意框架样式覆盖问题。
直接用 input:user-invalid 配合原生验证属性，是最轻量、最稳的高亮方式；但必须确保用户已交互、表单没加 novalidate，且 CSS 选择器写法完整。
为什么 input:invalid 常常不生效
不是代码写错了，是触发条件没满足。浏览器只在以下三者同时成立时才匹配 :invalid：
-
<input>带验证属性（如required、type="email"、pattern） -
<form></form>没有novalidate属性 - 用户已完成一次交互（
blur、input后删空、或点击了submit）
常见踩坑：<input type="text"> 输错邮箱不会变红——必须改成 type="email"；页面一加载所有 required 输入框就红了，是因为没区分“用户是否动过”，这时该换用 :user-invalid。
input:user-invalid 怎么写才真正生效
:user-invalid 是 Level 4 标准，只在用户操作后才激活样式，避免初始误标红。2026 年主流浏览器（Chrome 102+、Firefox 119+、Safari 16.4+）已全覆盖。
立即学习“前端免费学习笔记（深入）”；
推荐 CSS 写法：
input:user-invalid {
border: 2px solid #d32f2f;
outline: none;
}
注意点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 别只写
border-color——原始样式若定义了border: 1px solid #ccc，只改颜色可能因border-width或border-style缺失导致视觉异常 - 如果用了 Ant Design 等框架，它的
.ant-input-status-error类可能覆盖你的样式，要么提高选择器权重（如form input:user-invalid），要么改用 JS 控制类名 -
:user-invalid不会替代:invalid，两者可共存，但:user-invalid优先级更高
JS 主动控制高亮时怎么避免状态不同步
当用 setCustomValidity() + reportValidity() 做自定义校验时，:invalid 会响应，但清空错误后样式立刻消失，而 JS 控制的类名可以更可控。
推荐做法：
- 拦截
submit事件，调form.checkValidity() - 遍历
form.querySelectorAll(':invalid')找出所有违规字段 - 对每个字段添加
invalid类（如el.classList.add('invalid')），而不是依赖伪类 - 提交成功后，手动清除所有
invalid类，防止残留 - 跳过
disabled或readonly字段，避免干扰逻辑
关键细节：不要在 submit 里只做 e.preventDefault() 就完事，必须显式激活错误反馈，否则用户看不到哪错了。
高亮后怎么让第一个错误框自动滚动到视野中心
只加红边框不够，用户得一眼看到错误在哪。必须三步联动：找错 → 聚焦 → 滚动。
找错不能靠 :invalid 选择器，它可能匹配到隐藏或未渲染的元素。稳妥做法是手动遍历：
- 用
form.querySelectorAll('input, select, textarea')获取候选控件 - 过滤掉
disabled、type="hidden"和!el.willValidate的元素 - 检查
!el.validity.valid && el.willValidate，优先关注validity.valueMissing和validity.typeMismatch - 取第一个满足条件的元素作为目标
聚焦后立即执行：
input.focus();
input.scrollIntoView({ block: 'center' });
顺序不能反；若父容器有 overflow: hidden 或 transform，scrollIntoView 可能失效，需降级为手动计算位置 + window.scrollTo()。
