oninvalid事件不能直接设置提示文本，需配合setCustomValidity()与oninput清空错误状态才能实现自定义原生验证提示。
oninvalid 事件本身不能直接设置提示文本
HTML 原生表单验证中，oninvalid 是一个事件处理器，它在浏览器判定输入无效时触发，但**它不负责显示提示**——显示的还是浏览器默认的 title 或 setCustomValidity() 设置的内容。直接写 oninvalid="this.setCustomValidity('请输入邮箱')" 是常见误解：这行代码只在首次触发时生效，后续再触发会因上一次的错误信息未清除而卡住验证状态。
-
setCustomValidity()必须配合oninput或onchange清空错误（设为空字符串），否则表单永远 invalid - 仅靠
oninvalid无法覆盖 Chrome/Firefox 的 tooltip 样式或位置 - 移动端 Safari 对
oninvalid支持不稳定，有时不触发
正确做法：用 setCustomValidity + oninput 清空
要实现“自定义原生提示”，核心是控制 setCustomValidity() 的生命周期。浏览器只在调用该方法且传入非空字符串时才标记字段为 invalid，并显示该字符串；一旦传入空字符串，字段恢复 valid 状态，原生提示消失。
<input
type="email"
required
oninvalid="this.setCustomValidity('请填写正确的邮箱地址')"
oninput="this.setCustomValidity('')"
/>
注意两点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
oninvalid里只设错误文本，不做逻辑判断（判断应由pattern、required等原生属性完成） -
oninput必须存在，且必须设为''（空字符串），不能是' '或null，否则仍视为有自定义错误
为什么不用 addEventListener？
用 JS 绑定 addEventListener('invalid', ...) 看似更规范，但有个关键限制：invalid 事件不冒泡，且无法阻止默认提示。你监听到了事件，却没法干预浏览器下一步弹 tooltip 的行为。而内联 oninvalid 是唯一能“顺手”调用 setCustomValidity() 并让浏览器采纳的时机。
立即学习“前端免费学习笔记（深入）”；
- 用
addEventListener+setCustomValidity()可以工作，但必须确保在用户交互（如输入、失焦）后及时清空，否则容易残留错误态 - 内联方式更直接，适合简单表单；复杂场景建议封装成函数，比如
oninvalid="handleInvalid(this, '手机号格式不对')"
兼容性与真实体验差异
所谓“原生提示”，其实各浏览器渲染完全不同：Chrome 显示带箭头的底部 tooltip，Firefox 在 input 上方，Safari 在底部且无箭头。它们都不支持 CSS 定制，也不能加图标或换行。如果你看到“自定义样式提示”，那一定是用 JS 拦截了验证并自己造了个 div 浮层——那就不是原生提示了。
- 所有现代浏览器都支持
setCustomValidity()，但 IE10+ 才支持oninvalid事件 - 移动端点击提交后，部分安卓浏览器会聚焦第一个 invalid 字段但不显示提示，需手动触发
reportValidity()强制提示 - 真正稳定可控的方案，往往需要在
form.onsubmit里调用event.preventDefault()+input.reportValidity()来统一触发
