Bootstrap 5 表单验证样式失效的四大原因：一是 form 缺少 novalidate 或 was-validated 属性，导致伪类和 CSS 规则不生效；二是 is-invalid 类未直接加在控件上；三是 invalid-feedback 不是紧邻后继兄弟元素；四是 iOS Safari 下需 JS 主动控制状态而非依赖 :invalid。
form 标签没加 novalidate 或 was-validated
Bootstrap 5 的验证样式（红色边框、invalid-feedback 显示）完全依赖这两个属性或类来“激活”。不加，所有 :invalid 伪类规则、.form-control.is-invalid ~ .invalid-feedback 等 CSS 都不会生效。
常见错误是只写了 <form>，没加任何属性。必须二选一：
-
novalidate：禁用浏览器原生弹窗，把控制权交给 JS，适合需要自定义提示、联动校验的场景 -
was-validated：由 JS 在提交时动态添加，表示“已触发过一次验证”，之后伪类才参与样式计算
混用也没问题，但漏掉就等于关掉了整个验证样式开关。
is-invalid 类没加在 input/select/textarea 上
Bootstrap 5 只认直接作用于表单控件本身的 is-invalid 类。加在 <div class="mb-3"> 或 <div class="form-group"> 这类容器上，边框颜色不变，invalid-feedback 也不会显示。
立即学习“前端免费学习笔记（深入）”；
结构必须严格满足：
<input type="email" class="form-control is-invalid">-
<div class="invalid-feedback">邮箱格式不对</div>—— 必须是它的**紧邻后继兄弟元素**
中间插了空格、注释、<br> 或其他标签，通用兄弟选择器 ~ 就失效了。
invalid-feedback 元素被 display: none 或 opacity 压制
invalid-feedback 默认是 display: none，只在满足 .form-control.is-invalid ~ .invalid-feedback 时才显式设为 display: block 并提升 opacity。但如果你只改了 color，它可能还是灰的甚至看不见。
必须同时覆盖两个关键规则：
.form-control.is-invalid ~ .invalid-feedback { color: #d32f2f; opacity: 1; }.form-control.is-invalid { border-color: #d32f2f; }
单独写 .invalid-feedback { color: red } 权重不够，会被 Bootstrap 原生高优先级规则（比如 [class*="is-invalid"]）覆盖。
iOS Safari 下状态不同步导致样式卡住
iOS Safari 对 :invalid 伪类的响应有明显延迟，尤其在 input 或 blur 事件中。仅靠 HTML5 原生验证 + novalidate，经常出现“输错了但边框没变红、提示没出来”的情况。
真正可靠的解法是绕过伪类，用 JS 主动控制：
- 监听
input和blur事件 - 调用
input.checkValidity() - 手动增删
is-invalid/is-valid类 - 同步更新
invalid-feedback的文本内容
这个步骤不能省——否则你调试半天 CSS，最后发现问题是 Safari 根本没触发伪类。
