在Input Group中嵌入验证图标与浮动标签

结合Bootstrap表单验证与Input Group，实现前置/后置图标自动显示校验状态。 · 难度：入门 · +10XP

带验证图标的Input Group

Bootstrap支持.is-valid/.is-invalid类但默认在Input Group中图标位置不佳。本教程通过在.input-group-text内放置.bi-check-circle或.bi-exclamation-triangle，并利用相邻兄弟选择器+根据输入状态切换显示。同时使用position: absolute使浮动标签重叠在输入框上。讲解如何用JavaScript监听input事件实时反馈。

<div class="input-group has-validation"> <span class="input-group-text" id="icon-addon"><i class="bi bi-envelope"></i></span> <input type="email" class="form-control" required> <div class="invalid-feedback">请输入有效邮箱</div> </div>