form.reportvalidity()需在用户交互中调用表单元素，且控件含required等校验属性并校验失败时才显示气泡；disabled/readonly字段不参与；不支持单个input调用；ios和微信浏览器存在兼容性问题。
在 H5 页面中调用 form.reportValidity() 可以触发浏览器原生的表单验证，并显示默认的校验气泡提示（如红色边框 + 气泡 tooltip），但前提是表单控件必须满足「可校验」条件且校验失败。
确保表单元素有有效的校验属性
浏览器只对带有校验约束（如 required、type="email"、minlength、pattern 等）且当前值不满足规则的字段，才会在 reportValidity() 调用时显示气泡提示。
-
<input required>—— 留空即触发 -
<input type="email" value="abc">—— 非法邮箱格式会触发 -
<input pattern="[0-9]{6}" value="123">—— 不匹配正则会触发 - 注意：
disabled或readonly的字段不会参与校验，也不会显示提示
调用时机必须在用户交互上下文中
现代浏览器（Chrome ≥ 78、Safari ≥ 15.4、Firefox ≥ 88）要求 reportValidity() 必须在用户手势（如 click、submit、input）触发的事件处理函数中同步调用，否则可能静默失败或不显示气泡。
- ✅ 正确：绑定在按钮
onclick或表单onsubmit中 - ❌ 错误：在
setTimeout、fetch.then、mounted钩子等异步回调中直接调用 - 若需异步后校验，可先缓存表单引用，在用户点击确认按钮时再调用
必须作用于 <form></form> 元素本身
reportValidity() 是 HTMLFormElement 的方法，不能在单个 input 上调用（input.reportValidity() 是无效的）。需获取整个表单元素再调用：
兼容性与移动端注意事项
多数安卓 Chrome 和 iOS Safari 支持该 API 并显示气泡，但表现略有差异：
- iOS Safari 气泡位置可能偏移，且不支持自定义样式；部分旧版（iOS 15.0–15.3）存在气泡不出现的 bug，建议升级系统或降级为手动聚焦 +
setCustomValidity - 微信内置浏览器（X5 内核）对
reportValidity()支持不稳定，可加兜底逻辑：if (form.reportValidity?.() === false) { input.focus(); } - 若页面缩放或使用了
transform布局，气泡定位可能错乱，建议避免在表单容器上使用影响布局的 CSS 变换
