Bootstrap 5 表单验证样式生效需同时满足 novalidate 属性和 was-validated 类；.invalid-feedback 显示需配合 .is-invalid 类及兄弟选择器；iOS Safari 需 JS 同步状态；图标定位前须设 position: relative。
直接改 CSS 是可行的，但必须先确保验证流程已正确启动——否则你写的样式压根不会生效。
novalidate 和 was-validated 缺一不可
Bootstrap 5 的 :invalid 和 :valid 伪类样式只在两个条件同时满足时才参与计算：一是 <form> 上有 novalidate 属性（禁用浏览器默认弹窗），二是表单或其祖先有 was-validated 类（激活所有子控件的伪类匹配）。漏掉任意一个，.form-control:invalid 这类规则都会被忽略。
-
novalidate必须写在<form>标签上，不能只加在某个<input> -
was-validated不该初始渲染就加，而应在用户提交时通过 JS 添加：form.classList.add('was-validated') - 别用
reportValidity()触发校验——它会绕过novalidate，直接唤出原生浮层，样式全失效
覆盖 .invalid-feedback 颜色和显示逻辑
单独写 .invalid-feedback { color: #e53e3e } 没用。原因有三：默认透明度是 opacity: 0.6；它默认隐藏（display: none）；原始 CSS 权重极高，且依赖兄弟选择器触发显示。
- 必须成对覆盖：
.form-control.is-invalid控边框/聚焦态，.form-control.is-invalid ~ .invalid-feedback控提示文字 -
~是通用兄弟选择器，要求<input class="form-control is-invalid">和<div class="invalid-feedback">紧邻，中间不能插空格、注释或其它标签 - 要改颜色，得同时设
color、opacity: 1、font-weight: 500，否则还是发灰看不清
反馈图标位置调整必须改定位参考点
Bootstrap 5 的验证图标是 .form-control::after 伪元素，默认相对于 .input-group 容器右对齐。一旦输入框带右侧 addon（比如单位“kg”或密码 toggle 按钮），图标就会叠在 addon 上。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给
<input class="form-control">加position: relative - 再重写伪元素定位：
.form-control:invalid::after { right: 0.5rem; top: 50%; transform: translateY(-50%); } - 若输入框有自定义
line-height或上下padding，top: 50%会偏移，可换用top: calc(50% - 6px)（假设图标高 12px） - 避免用
vertical-align: middle——它对绝对定位元素无效
iOS Safari 下必须用 JS 主动同步状态
:invalid 伪类在 iOS Safari 中响应延迟明显，blur 后可能等半秒才变红。纯靠伪类 + novalidate 不够稳。
- 监听
input或blur事件，调用input.checkValidity() - 手动增删类：
input.classList.toggle('is-invalid', !valid) - 同步更新文案：
input.nextElementSibling.textContent = '用户名已被占用' - 尤其注意：HTML5 原生
setCustomValidity('xxx')不会自动触发is-invalid，这步 JS 同步不能省
真正容易被忽略的是结构约束：兄弟选择器 ~ 要求 DOM 顺序严格，JS 同步要覆盖所有触发时机（不只是 submit），而图标定位参考点切换这个动作，90% 的人第一次都漏掉 position: relative 这一行。
