setcustomvalidity气泡不显示，需检查validity.valid是否为false并显式调用reportvalidity()；ios safari不支持该气泡，须ua检测降级为dom提示。
setCustomValidity 气泡不显示？检查 validity.valid 是否为 false
浏览器只在 input 或 select 元素的 validity.valid 为 false 时才触发气泡提示。调用 setCustomValidity("错误信息") 本身不会自动让元素失效——你必须手动破坏其有效性，比如清空 setCustomValidity("") 后再设非空字符串，或配合 reportValidity() 主动触发。
常见错误是只写 element.setCustomValidity("邮箱格式不对") 却没让校验逻辑真正失败：
- 如果输入值合法（如邮箱格式正确），
validity.valid仍为true，气泡永不出现 - 若之前调过
setCustomValidity("")清除了错误，后续设新消息但未重触校验，气泡也不会弹 -
reportValidity()是关键触发点，尤其在自定义校验后必须显式调用
气泡文字被截断或样式异常？别依赖 innerText 修改提示
浏览器原生气泡内容完全由 setCustomValidity() 的参数决定，和元素的 title、innerText 或 CSS 无关。试图用 element.title = "新提示" 或改 placeholder 不会影响气泡。
真正可控的只有传入 setCustomValidity() 的字符串本身：
- 避免换行符（
\n）、HTML 标签（会被当纯文本显示，不渲染） - 部分浏览器对超长文本会截断，建议控制在 60 字以内
- 中文标点、空格正常显示，但开头/结尾多余空格可能被忽略
- 若需动态内容，拼接后直接传入：
input.setCustomValidity(`请输入 ${fieldName}`)
表单 submit 时气泡不弹？确保校验发生在 reportValidity() 前
表单默认提交会自动调用 checkValidity()，但如果你在 submit 事件里做了异步校验（如发请求验证用户名是否可用），就无法靠默认行为触发气泡——因为异步完成时提交早已发生。
解决方式是阻止默认提交，等校验完成再手动触发：
- 在
form.addEventListener("submit", e => { e.preventDefault(); ... })中拦截 - 异步校验结束后，调用
input.setCustomValidity(errorMsg)（ errorMsg 为空则清除错误） - 最后统一调用
form.reportValidity()—— 它会对所有无效字段显示气泡 - 不要只对单个
input.reportValidity()，它只触发该元素，且可能被表单默认行为覆盖
移动端 iOS Safari 气泡不显示？兼容性限制必须绕过
iOS Safari（截至 iOS 17）根本**不支持** setCustomValidity 的气泡提示，调用后无任何视觉反馈，reportValidity() 也静默返回 false。这是已知限制，不是代码写错。
实际方案只能降级处理：
- 检测环境：
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) - 对 iOS 设备，放弃气泡，改用 DOM 插入提示文案 + 添加
aria-invalid="true"和红框样式 - 保留
setCustomValidity()调用，不影响其他平台，也不破坏表单原生校验逻辑 - 注意：iOS 上
input.reportValidity()返回false但不报错，不能以此判断校验失败
最易被忽略的是：开发时在 Chrome 测试完美，上线后 iOS 用户完全看不到提示，得靠 UA 检测主动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
