ios safari 的 :invalid 伪类触发保守，需 js 主动校验并手动控制 is-invalid 类与 .invalid-feedback 显示；分步表单须确保 dom 结构相邻、添加 novalidate 属性、同步清除旧状态，并在点击“下一步”时执行完整校验链。
为什么分步表单的实时验证总在 iOS 上失效
不是代码写错了，是 iOS Safari 对 :invalid 伪类触发极其保守——blur 后可能不响应，input 过程中几乎不触发，导致 is-invalid 类加不上、.invalid-feedback 不显示。纯靠 HTML required 或 pattern + CSS 在 iOS 上基本不可靠。
必须用 JS 主动控制状态：监听 blur 和 input（仅对邮箱、手机号等强格式字段），手动调用 input.checkValidity()，再根据结果加/删 is-invalid 类，并显式设置 .invalid-feedback 的 display 和内容。
- 别依赖浏览器自动加类，iOS 下
setCustomValidity()也不稳定，统一走classList.add('is-invalid')+textContent - 每次校验前先清旧态：
input.classList.remove('is-valid', 'is-invalid')，否则残留类会干扰后续样式 - 移动端 focus() 定位后要加
scrollIntoView({ behavior: 'smooth', block: 'center' })，否则错误项可能被键盘遮挡
如何让 .invalid-feedback 在每一步都正确显示
.invalid-feedback 默认 display: none，且只在紧邻的前一个兄弟元素带 is-invalid 时才通过 .form-control.is-invalid ~ .invalid-feedback 规则显示。分步表单常因 DOM 结构嵌套或动态插入导致“不相邻”，直接导致提示不出现。
关键三点必须同时满足：
-
<input class="form-control is-invalid">和<div class="invalid-feedback"> 必须同级、无间隔标签（包括空格和注释）；若用 <code>form-floating，反馈元素仍需紧跟<input>，不能塞进<label></label> - 整个
<form></form>必须有novalidate属性，否则浏览器原生弹窗会拦截并阻止 Bootstrap 样式激活 - 不能只改
.invalid-feedback颜色——它自带opacity: 0.6，必须同步覆盖：.form-control.is-invalid ~ .invalid-feedback { opacity: 1; color: #d32f2f; } - 遍历当前步骤内所有必填/格式字段，逐个调用
input.checkValidity() - 对失败项：加
is-invalid、设.invalid-feedback.textContent、调input.focus() - 全部通过才允许切换步骤，并清除上一步的
is-invalid类（避免残留红框干扰） - 如果用了
was-validated模式，不要全局加该类——只在最终提交时用，否则未激活步骤也会提前渲染错误样式 - 横排时用
display: flex+.nav-item:not(:last-child) .nav-link::after画箭头，配合flex-grow: 1动态撑开连线 - 竖排时禁用
::after，改用margin-bottom或border-bottom模拟连线，避免箭头方向混乱 -
.invalid-feedback在移动端字体降到0.875rem，否则高度撑开导致行距失衡，影响整体步骤对齐 - 小屏下每个步骤的
.nav-link建议加text-align: center，防止文字过长导致节点偏移
点击“下一步”时如何做跨步实时校验
用户点“下一步”不能只切换 UI 状态（比如加 aria-current="step" 或改背景色），否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。
必须在点击事件里执行完整校验链：
响应式断点下连线与反馈的适配要点
分步导航的连线（step connector）和错误提示在小屏（如 @media (max-width: 576px)）下容易错位或重叠，不是 CSS 写得不够多，而是布局模型没切过去。
推荐做法：
最易被忽略的是：分步表单的验证状态必须与 DOM 可见性同步——隐藏的步骤里，input 若仍保留在 DOM 中（而非 display: none 移除），其 checkValidity() 仍会返回 true，但用户看不见错误提示；所以建议用 hidden 属性或 aria-hidden="true" 配合 display: none 彻底隔离未激活步骤的校验上下文。
