在 iOS Safari 中需禁用原生校验气泡并替换为自定义 Toast：添加 novalidate、oninvalid="this.setCustomValidity('')"，监听 invalid 事件 preventDefault()，submit 时 checkValidity() 聚合错误并显示 aria-live Toast，自动聚焦首错字段。
在移动端（尤其是 iOS Safari）拦截原生校验气泡并替换为自定义 Toast，不能只靠 CSS 隐藏或事件阻止——浏览器会在提交前、失焦时主动弹出横幅或模态提示，必须从验证机制源头干预。核心思路是：禁用原生触发路径 + 主动接管校验时机 + 同步状态与 UI。
必须加 novalidate 并清理 input 的校验状态
仅给 form 加 novalidate 不够，Safari 仍可能在 blur 或回车时弹出键盘上方横幅。需三者配合：
-
form 标签写
novalidate：关闭所有 submit 时的原生拦截和提示 -
每个 input 加
oninvalid="this.setCustomValidity('')"：防止失焦时 Safari 自动触发校验弹层 -
监听
input或focus事件，同步调setCustomValidity('')：避免用户粘贴、长按修改后状态残留
用 invalid 事件拦截 + 手动聚合错误
invalid 事件在浏览器判定字段无效时**立即触发**，且发生在气泡弹出前，是唯一可 preventDefault() 的时机：
- 给每个 input 绑定
invalid事件，调e.preventDefault() - 不依赖单个事件反馈，而是在
submit时统一调form.checkValidity() - 遍历
form.elements，对每个!el.checkValidity()的字段，提取el.validationMessage或映射中文提示 - 把所有错误消息收集后，一次性显示为 Toast（如用
document.createElement('div')插入 body）
Toast 要兼顾可访问性与交互体验
原生气泡被移除后，无障碍支持和焦点管理需手动补全：
- Toast 元素加
aria-live="assertive"，确保读屏器能朗读 - 错误发生后，自动
el.focus()到第一个违规字段（iOS Safari 需配合setTimeout延迟执行） - Toast 应定位在页面顶部或键盘上方安全区（可用
window.visualViewport?.height动态计算） - 避免使用
reportValidity()，它在novalidate下不弹窗，但会干扰你自定义的流程
注意 Safari 的特殊行为边界
macOS 和 iOS Safari 对表单验证更激进，有些操作无法绕过：
- 即使加了
novalidate，若字段有required且为空，点击 submit 按钮仍可能聚焦并高亮——这是伪类:invalid的 CSS 行为，不是弹窗，可通过input:invalid { box-shadow: none; }控制视觉 - 不要用
form.submit()触发提交，它跳过验证；改用form.requestSubmit()，它会触发invalid事件，便于你拦截 - 若用框架（如 Vue/React），确认未同时启用
v-model的规则校验和原生required，否则状态易冲突
