oninvalid 事件仅响应浏览器校验失败，需配合 setcustomvalidity() 设置文案并调用 reportvalidity() 或触发 submit 才能显示提示；清空错误必须用 setcustomvalidity('')，且应在 form.submit 中统一处理验证逻辑。
oninvalid 属性本身不能直接显示自定义提示
很多人以为写 oninvalid="setCustomValidity('手机号不能为空')" 就能立刻弹出自定义文案，结果点击提交还是看到“请填写此字段”。这是因为 oninvalid 只是一个事件处理器，它不自动触发 UI 提示——它只在浏览器判定字段无效的瞬间执行里面的 JS，而 setCustomValidity() 本身只是设置错误状态，并不弹窗。
真正让提示出现的，是后续的 reportValidity() 或表单 submit 行为。没这一步，oninvalid 里的代码就只是“设了个标记”，用户啥也看不到。
-
oninvalid是被动响应，不是主动弹窗指令 - 必须配合
setCustomValidity()+reportValidity()（或自然 submit）才能生效 - 如果表单设置了
noValidate，oninvalid根本不会触发
用 oninvalid 拦截默认气泡并替换文案
浏览器原生提示（比如 Safari 的“Please fill out this field”）会在 oninvalid 触发后立即弹出。想换掉它，唯一办法是在 oninvalid 里调 e.preventDefault() 阻止默认行为，再手动设置文案。
注意：这个事件只在浏览器内部校验失败时触发，比如 required 为空、type="email" 缺 @、pattern 不匹配。它不会因为你 JS 赋值就触发，也不会监听粘贴内容变化。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须在
oninvalid回调中第一时间调e.preventDefault() - 紧接着调
el.setCustomValidity('你的文案')，否则下次 submit 还会走原生逻辑 - 别忘了在用户输入合法后清空：比如监听
input事件，调el.setCustomValidity('') - 移动端 Safari 对
reportValidity()响应不稳定，建议统一在form.submit中处理
setCustomValidity('') 是重置的关键，不是 setCustomValidity(null)
很多 bug 来自误以为传 null、undefined 或空格 ' ' 就能清空错误。只有传严格等于空字符串 ''，浏览器才认为该字段“恢复有效状态”。否则它会一直卡在“自定义失败”状态，哪怕你输对了也还是红框+旧提示。
-
el.setCustomValidity('')✅ 正确重置 -
el.setCustomValidity(null)❌ 仍视为错误 -
el.setCustomValidity(' ')❌ 空格也是非空字符串，照样报错 - 初始化时就要先调一次
el.setCustomValidity('')，否则和原生 required 冲突
submit 时统一校验比依赖 oninvalid 更可靠
单独靠 oninvalid 容易漏场景：JS 直接赋值、粘贴内容、批量修改字段、异步填充等都不会触发它。更稳的做法是在 form.submit 事件里手动遍历所有字段，调 el.checkValidity() 判断，再用 el.reportValidity() 主动触发提示。
这样还能聚合多个错误，避免用户点一次提交只看到一个气泡，填完又弹下一个。
- 不要在按钮
click里调reportValidity()，容易和原生 submit 冲突 - 在
form.addEventListener('submit', e => { ... })中统一控制 - 若验证失败，
e.preventDefault()后再逐个调el.reportValidity()，顺序很重要 - 屏幕阅读器需要同步更新
aria-invalid和aria-describedby，光设setCustomValidity不够
oninvalid 是浏览器校验失败的“通知”，不是“开关”；真正控制提示时机和文案的，是你对 setCustomValidity 和 reportValidity 的组合节奏。稍一松懈，就会出现“输对了还报错”“点了提交没反应”“移动端不弹提示”这类问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
