必须在form标签加novalidate属性，否则浏览器原生验证会覆盖bootstrap的.invalid-feedback提示；.invalid-feedback显示需满足：input带is-invalid类、与提示元素紧邻、父表单有was-validated类；移动端需js校验并手动控制状态；弹窗需求应改用toast或modal组件。
不加 novalidate 就别想弹出自定义提示
浏览器原生验证会抢在 Bootstrap 的 .invalid-feedback 之前弹窗，直接盖掉你写的提示文字。必须在 <form></form> 标签上显式写 novalidate，否则所有后续样式和 JS 控制都白搭。
-
novalidate是开关，不是可选项；漏了它，.was-validated类不会激活，.invalid-feedback永远 display: none - 不要只给某个
<input>加，必须作用于整个表单容器 - 即使用了
setCustomValidity()，没novalidate也会触发原生弹窗，导致两次提示或样式错乱
.invalid-feedback 不显示？先查 DOM 结构和类名
.invalid-feedback 默认隐藏，靠 CSS 规则 .form-control.is-invalid ~ .invalid-feedback 控制显隐。它只在满足三个条件时才出现：前一个兄弟元素是带 is-invalid 的表单控件、二者紧邻（中间不能有空格/注释/其他标签）、父表单有 .was-validated 类。
- 手动检查 HTML：确保
<input class="form-control is-invalid">和<div class="invalid-feedback">…</div>是连续的兄弟节点 - 如果用了
form-floating，.invalid-feedback必须放在form-floating容器内，且仍需紧跟<input> - JS 中加类必须加到
<input>上，不是外层<div>；加完后记得同步调用 <code>form.classList.add('was-validated')移动端（尤其 iOS Safari）不弹提示？别信 :invalid 伪类
iOS Safari 对
:invalid响应极慢甚至不触发，纯靠 HTML 属性 + CSS 在真实设备上大概率失效。必须用 JS 主动校验并手动控制状态。- 监听
blur或input（对邮箱/手机号等强格式字段），调用input.checkValidity() - 根据返回值，显式执行：
input.classList.add('is-invalid')或.remove('is-invalid', 'is-valid') - 同时设置
.invalid-feedback.textContent并控制其style.display = 'block'，别依赖 CSS 自动切换 - 焦点跳转后补一句
input.scrollIntoView({ behavior: 'smooth', block: 'center' })，避免被软键盘遮住错误项
真要“弹出”——就别用
.invalid-feedback，换 Toast 或 Modal.invalid-feedback是嵌入式提示，位置固定、样式受限。如果需求明确是“弹出”，说明你要的是脱离表单流、居中、带遮罩、可关闭的反馈，那它天生就不适合。- 小屏下用
position: fixed+transform: translate(-50%, -50%)配合媒体查询，但需 JS 动态加/删 class，否则提交后残留 - 更稳妥是直接用 Bootstrap 的
Toast组件：创建独立<div class="toast">，用 JS 控制 show/hide，不依赖表单结构 <li>若需用户确认，Modal 更合适；注意 Modal 内容要动态注入错误信息，而不是复用 <code>.invalid-feedback的 DOM 节点
真正卡住人的从来不是“怎么写提示文字”，而是验证状态没同步、DOM 结构被破坏、或者把“嵌入提示”当成“弹窗组件”来用。
- 监听
