Bootstrap 5 表单验证图标需用 input-group + input-group-text 实现，图标作为其直接子元素，SVG 需设 height:1em;width:1em;，并添加 aria-hidden="true"，旧版 .form-control-feedback 类已失效。
Bootstrap 5 表单验证图标位置为什么总偏移
因为 Bootstrap 5 默认不提供表单验证图标（✔️/❌）的自动定位支持——它只控制边框颜色和 .valid-feedback/.invalid-feedback 文字提示的显隐，图标得你手动加、手动对齐。常见错误是直接在 input 上用 background-image 或绝对定位塞图标，结果在缩放、iOS Safari、高对比度模式下全部错位。
用 input-group + input-group-text 套验证图标最稳
这是唯一被 Bootstrap 5 官方结构兼容、无障碍友好、响应式可靠的方案。图标必须作为 input-group-text 的直接子元素，不能挂到 input 上，也不能用伪元素生成。
-
input-group-text必须包裹图标（<i></i>、<svg></svg>或<span></span>），且该容器必须与input.form-control同级并处于同一input-group内 - 右侧图标：DOM 顺序为
<input><div class="input-group-text">...</div> - 左侧图标：顺序为
<div class="input-group-text">...</div> <input> - SVG 图标需设
height: 1em; width: 1em;，否则易上下偏移；Font Awesome 推荐加fa-fw类保宽度一致 - 禁用态时，
input:disabled会联动影响input-group-text的 opacity，若需单独控制，得加自定义类覆盖
.form-control-feedback 类在 Bootstrap 5 中已失效
这个类属于 Bootstrap 3/4 的旧机制，Bootstrap 5 彻底移除了它。如果你在代码里还看到 .has-feedback、.form-control-feedback 或相关 CSS 规则（比如 .has-feedback .form-control-feedback { top: 25px; right: 0; }），一律删掉或注释掉——它们不会生效，还会干扰 Flex 布局计算。
- 搜索项目中所有
form-control-feedback字符串，替换为input-group-text - 删除或归档旧版 CSS 覆盖规则，例如
.has-feedback .form-control-feedback或.form-horizontal .has-feedback - 不要试图复用 Bootstrap 4 的 FormValidation 插件 CSS，它和 Bootstrap 5 的
input-group不兼容
动态显示/隐藏验证图标需要 JS 配合
Bootstrap 5 的 .was-validated 和 .needs-validation 只控制边框和文字反馈，图标得靠 JS 切换 input-group-text 的显隐状态。关键点不是加 class，而是控制 DOM 可见性与语义可访问性。
- 用
classList.toggle('d-none', !isValid)控制显隐，别用style.display = 'none'—— 后者绕过无障碍树 - 图标容器需加
aria-hidden="true"，确保屏幕阅读器不读图标本身（语义由.valid-feedback承担） - 验证状态变更后，调用
input.reportValidity()触发原生校验流程，再同步图标状态 - 避免在每次
input事件里重绘整个input-group，只切换已有节点的 class 更轻量
aria-hidden 的配合——没设 height/width 的 SVG 在不同字体上下文中会“浮动”，而漏掉 aria-hidden="true" 会导致屏幕阅读器重复播报“勾号”“叉号”，破坏验证信息的主次逻辑。 
