BS5 验证

Bootstrap 5 (BS5) 是一种流行的开源 CSS 框架，它提供了许多强大的组件和工具，可以帮助您更快地创建现代 Web 应用程序。其中一个非常重要的组件是验证（validation）。

验证简介

验证是 Web 表单的一个非常重要的部分。它确保了输入的数据符合某些规则或条件。如果输入的数据不符合这些规则或条件，则无法提交表单。BS5 提供了一种简单但强大的验证系统，来确保表单数据的正确性。

表单验证

BS5 的验证是基于表单的。您只需要将一些属性添加到您的表单元素中，就可以启用验证。此时，表单会自动为您验证输入数据，如果出现错误，则会在表单元素旁边显示错误消息。

以下是一些常用的表单验证属性：

• required: 表示该表单元素必填。
• pattern: 指定一个正则表达式，用于验证输入格式。
• min 和 max: 指定一个最小值和最大值。
• step: 指定步长。
• disabled: 禁用该表单元素。

这些属性可以与 input、select 和 textarea 等表单元素一起使用。下面是一个例子：

<form>
  <div class="form-group">
    <label for="username">用户名：</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">请输入用户名</div>
  </div>
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" class="form-control" id="password" required>
    <div class="invalid-feedback">请输入密码</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在上面的例子中，我们使用了 required 属性来确保表单元素不能为空，同时在每个表单元素旁边添加了一个 invalid-feedback 元素，用于显示错误消息。

表单状态

BS5 还为表单元素提供了一些状态类，用于指示表单元素的当前状态。这些状态类包括：

• .is-valid: 表示表单元素输入的数据是有效的。
• .is-invalid: 表示表单元素输入的数据无效。

您可以使用这些状态类来添加自定义样式和行为。以下是一个例子：

<form>
  <div class="form-group">
    <label for="email">邮箱：</label>
    <input type="email" class="form-control" id="email" required>
    <div class="valid-feedback">邮箱格式正确</div>
    <div class="invalid-feedback">请输入有效的邮箱</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在这个例子中，我们使用了 type="email" 属性来指定输入为电子邮件地址，并使用了 valid-feedback 和 invalid-feedback 元素来显示验证结果。如果输入的电子邮件地址有效，则输入框周围将出现一个绿色背景色（由 .is-valid 类指定），否则将出现红色背景色（由 .is-invalid 类指定）。

总结

BS5 的验证是一个非常有用的组件，它可以帮助您验证表单输入的数据。通过使用表单验证特性和状态类，您可以快速构建出一个漂亮而实用的表单验证系统。