Bootstrap 5 验证图标需手动添加并用 input-group + input-group-text 实现，.form-control-feedback 已彻底移除；SVG 图标须设 height:1em;width:1em; 并加 aria-hidden="true"，显隐须用 classList.toggle('d-none', !isValid) 控制。
Bootstrap 5 的验证图标根本不是自动渲染的
别再找 .form-control-feedback 类了——它在 Bootstrap 5 中已彻底移除。你看到的任何 ✔️/❌ 图标，都是手动加的，不是框架生成的。官方只控制边框颜色、.valid-feedback 和 .invalid-feedback 文字提示的显隐，图标得你自己放、自己对齐、自己控制显隐逻辑。
用 input-group + input-group-text 是唯一稳方案
这是 Bootstrap 5 官方结构兼容、无障碍友好、响应式可靠的唯一方式。其他做法（比如 background-image、伪元素、绝对定位塞在 .form-control 上）在 iOS Safari、高对比度模式、缩放或表单禁用态下大概率错位或不可见。
-
input-group-text必须与.form-control同级，且同属一个.input-group容器 - 右侧图标：DOM 顺序为
<input class="form-control"><div class="input-group-text">✅</div> - 左侧图标：顺序反过来，
<div class="input-group-text">?</div><input class="form-control"> - 若用 SVG，必须设
height: 1em; width: 1em;，否则垂直对齐会漂移 - 禁用态时，
input:disabled会联动降低input-group-text的 opacity；如需单独控制，得加自定义类覆盖
图标位置微调靠 CSS，不是靠 margin 或 padding
默认情况下，input-group-text 是块级弹性子项，水平方向靠 flex 布局推挤，垂直方向靠 align-items: center 居中。想让它“紧贴输入框末尾”，不要动 margin-right，而是利用 flex 排列：
- 右侧图标要靠右顶边？给
.input-group加justify-content: flex-end，但注意这会影响整个组布局 - 更常用的是：把图标容器设为
margin-left: auto（右侧）或margin-right: auto（左侧），配合.input-group { display: flex; align-items: center; } - 避免用
vertical-align: middle—— 它对 flex 子项无效 - 如果输入框有自定义
padding或line-height，align-items: center仍能保持图标和文字基线一致，比top: 50%可靠得多
动态显示/隐藏必须用 classList.toggle('d-none', !isValid)
Bootstrap 5 的 .was-validated 或 :valid/:invalid 伪类不会触发图标显隐，JS 必须接管。关键不是“加 class”，而是确保 DOM 可见性与语义可访问性同步：
- 用
element.classList.toggle('d-none', !isValid)，而不是element.style.display = 'none'—— 后者绕过无障碍树，屏幕阅读器读不到状态变化 - 图标容器（
input-group-text）需带aria-hidden="true"，避免被误读为内容 - 验证逻辑建议结合
checkValidity()+input.value.length判断，而非仅依赖:invalid伪类（它不涵盖空值校验等业务逻辑） - 别忘了监听
blur和input事件做实时反馈，但防抖至少 200ms，避免频繁重绘
最容易被忽略的一点：所有旧版 Bootstrap 3/4 的 .has-feedback、.form-control-feedback 相关 CSS 规则，必须从项目中彻底删除或注释掉。它们不仅无效，还会干扰 input-group 的 flex 计算，导致图标错位、高度塌陷或响应式失效。
