需在input和blur事件中调用checkvalidity()触发红框和气泡，用setcustomvalidity('')重置状态并自定义提示文案，禁用reportvalidity()避免干扰，通过js驱动验证状态确保:invalid生效。

怎么让 required 和 type="email" 触发红框和气泡提示

浏览器不会自动在用户打字时就显示验证 UI，必须手动调用 checkValidity() 才能触发边框变红、:invalid 伪类生效、以及 hover/blur 时的默认气泡。只靠写 required 属性是不够的。

常见错误：监听 input 事件却没调用 checkValidity()，结果用户输错内容也看不到任何视觉反馈。

• 实时校验应在 input 和 blur 两个事件里都调用 element.checkValidity()
• 别用 reportValidity() 做实时反馈——它会强制弹出打断操作的浏览器原生提示框
• checkValidity() 只返回布尔值，不改变 DOM 状态；要读错误文案得看 element.validationMessage
• 如果想清除校验状态（比如用户开始输入后清掉之前的错误），需先调用 setCustomValidity('')

怎么覆盖浏览器默认的错误提示文案

直接改 title 属性只能影响 pattern 不匹配时的提示，对 required 或 type="email" 失效。真正可控的方式是用 setCustomValidity()。

关键点在于时机和清空逻辑：设了非空字符串后，该字段就永远 invalid，直到你显式设回空字符串。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 在 input 事件中调用 element.setCustomValidity('')，可确保用户一输入就解除锁定状态
• 在 invalid 事件或提交时，根据 element.validity 对象判断具体失败原因，再设对应文案，例如：element.setCustomValidity('邮箱格式不对')
• 不要在 invalid 事件里设文案后就结束——它不阻止后续校验，必须配合 setCustomValidity('') 的重置逻辑

怎么让自定义错误提示不和浏览器气泡打架

浏览器原生气泡（reportValidity() 弹出的）和你手动插入的 DOM 提示（比如 <div id="error-message"></div>）会同时出现，体验割裂。

根本解法是彻底禁用原生提示，把控制权全交给 JS。

• 表单提交时第一件事就是 event.preventDefault()
• 所有验证逻辑走 checkValidity() + validationMessage 提取文案
• 用 CSS 控制自定义提示区域的显隐，例如加 class visible 再配 .error.visible { display: block; }
• 避免混用：不要一边调 reportValidity()，一边又往页面插提示元素

为什么 :invalid 样式有时不生效

因为 :invalid 是伪类，依赖浏览器内部 validity state，而这个状态默认只在表单提交或显式调用验证方法后更新。用户刚打开页面、还没动过输入框时，哪怕写了 required，它的 validity 仍是 true。

这也是为什么纯 CSS 方案不可靠——它没法感知“用户已尝试输入但未通过”的中间态。

• 首次加载页面时，input:required:invalid 不会匹配，除非你主动调一次 checkValidity()
• 想让红框“立即可见”，可在页面加载后对所有必填项执行 element.checkValidity()
• 注意兼容性：:valid/:invalid 在旧版 Safari 和部分 Android WebView 中行为不一致，建议始终用 JS 驱动状态

实际中最容易被忽略的，是 setCustomValidity('') 的调用时机。漏掉它，字段就会永久卡在 invalid 状态，无论用户怎么改都清不掉红框和自定义文案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！