最轻量方案是setCustomValidity()配合reportValidity()，前者设错误状态，后者触发UI提示；漏调reportValidity()则无气泡；invalid事件可拦截默认提示并自定义DOM；lang切换需手动重置setCustomValidity；:invalid:user-invalid组合控制样式更合理。
直接用 setCustomValidity() 配合 reportValidity() 是最轻量、浏览器原生支持的方案，但必须触发验证流程才会显示提示——光设值不调用验证方法，用户永远看不到错误。
setCustomValidity() 设了却不弹出？检查是否漏掉 reportValidity()
很多开发者写完 input.setCustomValidity('密码长度不足6位') 就以为完事了，结果点击提交毫无反应。这是因为 setCustomValidity() 只是“标记状态”，不触发 UI；真正唤起红色气泡提示的是 reportValidity()。
-
reportValidity()是 HTMLInputElement 方法，调用后会立即执行校验并显示气泡（含你设的文案） -
checkValidity()只返回true/false，不显示任何提示 - 如果在
submit事件里手动校验，又调了e.preventDefault()，那原生提示就彻底被拦住了——此时必须自己渲染提示，不能指望气泡 - 常见错误写法：
input.setCustomValidity('xxx'); input.checkValidity();→ 依然没提示
监听 invalid 事件拦截默认提示，改写自定义文案
浏览器在判定字段无效时，会同步触发 invalid 事件，且该事件发生在默认气泡弹出前。抓住这个时机，就能阻止系统提示、插入自己的 DOM 提示。
- 必须在事件处理器中调用
e.preventDefault()，否则原生气泡和你的逻辑会同时出现 - 只对已交互过的字段生效（比如 blur 后再输错），避免页面一加载就满屏红框
- 适合把错误文字写进紧邻的
<span class="error"></span>，而不是依赖气泡 - 注意：该事件不冒泡，也不能取消已弹出的提示（如果之前没监听到）
lang 切换后错误文案不变？要重置所有 setCustomValidity 状态
浏览器不会因为 <html lang="en"> 改了就自动更新表单提示——setCustomValidity() 设置的内容是一次性写死的，不响应语言变化。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 每次切换语言后，必须遍历所有带验证的
<input>、<select>、<textarea>，逐个调用element.setCustomValidity('')清空旧状态 - 再根据新
document.documentElement.lang查文案对象，重新setCustomValidity(translation) - 如果用了
novalidate属性禁用原生验证，就完全绕过这个问题，文案由 JS 全权控制 - 别依赖
navigator.language或languagechange事件，它们和页面lang属性无关
样式控制：:invalid 和 :user-invalid 必须组合使用
单用 :invalid 会导致页面刚加载时，所有空的 required 字段就带红边框——用户还没碰过，体验极差。
- 真正可控的写法是
input:invalid:user-invalid：只有用户操作过（focus + blur / 输入后清空等）且验证失败，才应用样式 -
:user-invalid在 Safari 和旧版 Edge 中支持较晚（Edge 105+ 稳定），IE 完全不支持，但渐进增强可行 - 不要用 JS 动态加
class="error"模拟，容易和原生验证状态冲突（比如清空错误后 class 还挂着） - 气泡提示本身无法定制位置、图标或字体，能改的只有文案内容
最容易被忽略的点是：所有基于 setCustomValidity() 的逻辑，都依赖控件处于可验证状态——disabled、readonly 或非表单控件（如 div）上调用它，完全无效。
