CSS Bootstrap 4 表单输入框带有验证图标

在本文中，我们将介绍如何使用CSS和Bootstrap 4来创建带有验证图标的表单输入框。

阅读更多：CSS 教程

什么是Bootstrap 4?

Bootstrap 4是一个流行的CSS框架，用于构建响应式和现代化的网页。它提供了许多预定义的CSS样式和组件，使开发人员可以更轻松地创建漂亮且一致的用户界面。

创建基本的表单输入框

首先，让我们创建一个基本的表单输入框，没有任何验证图标。使用Bootstrap 4的样式可以轻松地创建一个简单的输入框。

<input type="text" class="form-control" placeholder="输入文本">

上面的代码将创建一个带有Bootstrap 4样式的文本输入框。您可以在任何表单中使用这个输入框。

添加验证图标

为了添加验证图标，我们将使用以下组件：

输入框容器：用来包含输入框和图标的外层容器。
验证图标：根据输入框的验证状态，显示不同的图标。

<div class="input-group">
  <input type="text" class="form-control is-valid" placeholder="输入文本">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="fas fa-check-circle"></i>
    </span>
  </div>
</div>

在上面的代码中，我们使用了Bootstrap 4的input-group组件来包含输入框和验证图标。我们还添加了一个is-valid类来表示输入框是有效的，并使用Font Awesome图标库中的图标来表示验证成功。

您可以根据需要更改输入框的验证状态和图标。例如，如果输入框的值无效，您可以使用is-invalid类来更改验证状态，并使用错误图标来表示。

自定义验证图标

如果您想使用自定义的图标，您可以使用其他CSS或图标库来实现。以下示例演示了如何使用Font Awesome图标库中的不同图标来表示不同的验证状态。

<div class="input-group">
  <input type="text" class="form-control is-valid" placeholder="输入文本">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="fas fa-check-circle"></i> <!-- 验证成功 -->
      <i class="fas fa-exclamation-circle"></i> <!-- 验证失败 -->
      <i class="fas fa-info-circle"></i> <!-- 提示信息 -->
    </span>
  </div>
</div>

在上面的例子中，我们使用了Font Awesome图标库中的三个不同图标来表示不同的验证状态：验证成功、验证失败和提示信息。

您可以根据自己的需要使用其他图标库或自定义CSS来创建自己的验证图标。