表单控件高亮必须与校验状态同步、保障可访问性并适配后端任意字段名；需通过name属性优先匹配、CSS.escape防XSS、classList管理样式、同步更新label/ARIA，且:invalid伪类仅适用于原生校验，无法替代后端业务错误的JS控制。
表单控件高亮不是加个 border: 2px solid red 就完事——它必须和校验状态同步、不干扰可访问性、且能应对后端返回的任意字段名。
后端返回错误字段名，JS 怎么精准定位 input 元素
关键在字段名映射。后端可能返回 "user_email"，但页面上 input 的 id 是 "email" 或 name 是 "email"，两者未必一致。不能硬编码查找，得有转换规则。
- 优先用
name属性匹配：后端错误 key 和input[name]通常对齐，兼容性最好 - 若后端用下划线命名（如
"confirm_password"），前端可统一转为短横线（"confirm-password"）再查id或data-field - 避免用
querySelector(`[id="${key}"]`)直接拼接，防止 XSS；改用document.querySelector(`[name="${CSS.escape(key)}"]`) - 找不到时 fallback 到
data-api-field自定义属性，由后端或模板层显式注入映射关系
高亮样式该用 class 还是 style？为什么不能直接写 border
必须用 classList.add("error")，禁用直接操作 style.border。前者可统一收口、支持动画、便于测试；后者会导致样式污染、难以清除、且与 focus 状态冲突。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
input:focus时浏览器默认加outline，如果同时设了style.border，视觉上会被遮挡——而 class 可配合:focus规则一并控制 - 清空错误时，
classList.remove("error")比手动还原style.border更可靠，避免残留1px solid #e53e3e - 只高亮
input不够：配套的label要加error类，small.error-message要显示，ARIA 属性如aria-invalid="true"和aria-describedby必须同步设置
:invalid 伪类能替代 JS 高亮吗
不能。它只响应浏览器原生校验（required、type="email"、pattern），且触发条件苛刻：用户必须失焦、或提交后才生效，完全无法覆盖后端返回的业务错误（如“用户名已被占用”“手机号已实名”）。
立即学习“前端免费学习笔记（深入）”；
- Chrome 对
type="email"的宽松校验会让"abc"也被认为合法，:invalid根本不触发 - 移动端 Safari 中，
:invalid响应延迟明显，失焦后常需半秒才变色 - 调用
setCustomValidity("")清空校验后，:invalid状态不同步，必须手动element.classList.toggle("error") - 真正要做的，是把
:invalid当作兜底：仅用于基础格式校验，后端错误一律走 JS 控制 class
最易被忽略的是错误状态的生命周期管理——不是“加 class → 提交 → 清 class”，而是要考虑用户中途修改、连续提交、异步校验返回顺序错乱等场景。一个没移除的 error 类，可能让后续正确输入也持续红框。
