Bootstrap 5 提供了内建的表单验证功能，支持即时反馈验证结果（如成功、错误或警告状态）。这种验证方式可以非常简单地与 HTML 表单结合使用，且可以对表单控件进行实时检查，确保用户提交正确的数据。

1. 基本表单验证

Bootstrap 5 表单验证的工作方式基于 HTML 表单的内置验证机制。你只需要使用 required 属性、pattern 属性等标准 HTML 属性，并结合 Bootstrap 5 的 CSS 类来显示验证状态。

1.1 必填字段验证

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">
      Please enter a username.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • required：必填字段属性。
  • .invalid-feedback：如果验证失败，显示此元素的内容。

1.2 文本框格式验证

例如，确保输入的邮箱格式正确：

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please provide a valid email address.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • type="email"：确保输入是有效的电子邮件地址。
  • .invalid-feedback：提供失败时的反馈信息。

1.3 数字验证

如果希望用户输入数字，你可以使用 type="number" 属性来验证数字格式。

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="age" class="form-label">Age</label>
    <input type="number" class="form-control" id="age" min="18" max="99" required>
    <div class="invalid-feedback">
      Please enter a valid age between 18 and 99.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • type="number"：确保输入值是数字。
  • min 和 max：定义允许的数字范围。

2. 自定义验证

你也可以使用自定义的 JavaScript 验证规则来提供更多灵活性。

2.1 使用 JavaScript 自定义验证

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">
      Please provide a valid username.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
  // 获取所有表单元素
  var forms = document.querySelectorAll('.needs-validation');
  
  // 遍历每个表单
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      
      form.classList.add('was-validated');
    }, false);
  });
</script>
  • checkValidity()：检查表单元素是否符合验证规则。
  • .was-validated：当表单经过验证时，Bootstrap 会根据该类添加正确的验证样式（如错误的边框、提示信息等）。

2.2 自定义正则表达式验证

你也可以使用正则表达式验证输入内容。例如，检查用户名是否只包含字母和数字：

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" pattern="^[a-zA-Z0-9]+$" required>
    <div class="invalid-feedback">
      Please enter a valid username (only letters and numbers).
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • pattern="^[a-zA-Z0-9]+$"：自定义的正则表达式验证，要求用户名只能包含字母和数字。

3. 反馈样式

Bootstrap 5 提供了几种表单控件的反馈样式，包括验证成功、失败和未验证状态：

  • .is-invalid：表示验证失败。
  • .is-valid：表示验证成功。

例如：

<div class="mb-3">
  <label for="email" class="form-label">Email</label>
  <input type="email" class="form-control is-invalid" id="email" placeholder="Email" required>
  <div class="invalid-feedback">
    Please enter a valid email address.
  </div>
</div>
  • .is-invalid：表示字段验证失败时的状态。
  • .is-valid：表示字段验证成功时的状态。

4. 启用样式与表单状态

Bootstrap 5 会根据表单状态自动添加一些类来控制样式，如 was-validated。你可以通过它来控制哪些输入框已经验证。

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
  var form = document.querySelector('.needs-validation');
  form.addEventListener('submit', function (event) {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
</script>
  • was-validated：在表单提交后，添加 was-validated 类，以显示验证反馈样式。

5. 禁用提交按钮直到验证通过

你可以通过 JavaScript 控制提交按钮的启用和禁用，直到表单验证通过。

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  <button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>

<script>
  var form = document.querySelector('.needs-validation');
  var submitButton = form.querySelector('button[type="submit"]');

  form.addEventListener('input', function () {
    if (form.checkValidity()) {
      submitButton.disabled = false;
    } else {
      submitButton.disabled = true;
    }
  });
</script>
  • disabled：表单未通过验证时，禁用提交按钮。

总结

Bootstrap 5 的表单验证通过简单的 HTML 属性、CSS 类以及 JavaScript 配合提供了强大的功能。它不仅支持基础的字段验证（如必填、格式等），还支持自定义验证规则，增强了表单交互性和用户体验。通过结合 was-validated 类，开发者可以方便地处理表单状态和展示反馈信息。