novalidate 是启用 :invalid/:valid 伪类样式的硬性前提，必须加在 标签上；was-validated 是激活所有子控件伪类计算的总开关；自定义校验需结合 js 手动同步 is-invalid 类与 invalid-feedback 文案。
novalidate 是启动伪类样式的硬性前提
不加 novalidate，:invalid 和 :valid 伪类压根不会触发 Bootstrap 的验证样式链——浏览器原生弹窗会抢在 .invalid-feedback 渲染前弹出，你写的红边框、提示文字全被屏蔽。这不是 CSS 写得不够狠，是流程根本没走通。
-
novalidate必须加在<form></form>标签上，不是某个<input> - 加了
novalidate后，required、type="email"等属性语义仍保留，JavaScript 调用checkValidity()依然有效 - 别用
reportValidity()，它会绕过novalidate直接唤出原生浮层，破坏整个定制流程
.was-validated 才是伪类生效的总开关
.was-validated 不是可选修饰，而是激活所有子控件伪类计算的“总闸”。没有它，哪怕你写了 .form-control:invalid { border-color: red }，CSS 规则也因 specificity 不匹配而被忽略——Bootstrap 的原始规则带 [class*="is-invalid"] 这类高权重选择器。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 初始 HTML 中不要预设
.was-validated，否则页面一加载就满屏红框 - 只在
submit事件里调form.classList.add('was-validated')，确保是用户主动提交后才批量响应 - 若校验失败，保留该类；若通过，可选调
form.classList.remove('was-validated')清除状态，避免残留
改 .invalid-feedback 颜色必须连带覆盖 .form-control.is-invalid
单独写 .invalid-feedback { color: #d32f2f } 永远不生效。原因有三：一是 .invalid-feedback 默认 opacity: 0.6，颜色再深也发灰；二是它的 display: none 只在父级同时存在 .form-control.is-invalid 时才被 .form-control.is-invalid ~ .invalid-feedback 规则激活；三是 Bootstrap 原始规则权重极高，单靠低权选择器无法覆盖。
- 必须同步写两段 CSS：
.form-control.is-invalid（控边框/聚焦态）和.form-control.is-invalid ~ .invalid-feedback（控文字颜色/透明度/字体粗细） -
~是通用兄弟选择器，要求<input class="form-control is-invalid">和<div class="invalid-feedback"> 必须紧邻，中间不能插 <code><div> 或空格 <li>如果用了 <code>form-floating，结构仍是<input><label><div class="invalid-feedback">，顺序不能乱 <h3>iOS Safari 下伪类延迟，必须 JS 主动同步状态</h3> <p>iOS Safari 对 <code>:invalid伪类的响应有明显延迟，尤其在blur或input事件中。仅靠伪类 +novalidate会导致用户失焦后等半秒才看到红框，体验断裂。这时 CSS 伪类只是辅助，JS 才是主力。- 在
blur或input事件里调input.checkValidity()，根据返回值手动加/删is-invalid类 - 同时更新
input.nextElementSibling.textContent，确保.invalid-feedback文案与当前校验逻辑一致 - 对自定义规则（如密码强度），必须先调
input.setCustomValidity('错误信息')，再手动同步类和文案——Bootstrap 完全不监听setCustomValidity()的变化
novalidate或.was-validated，再漂亮的 CSS 也出不来；不手动同步is-invalid类，iOS 用户就卡在“该红不红”的状态里。 - 在
