Bootstrap 显示错误信息 - Html

Bootstrap 是一种流行的 HTML、CSS 和 JavaScript 框架，可以帮助您更轻松地创建响应式、移动优先的 Web 应用程序。在 Web 应用程序中，我们需要经常向用户显示错误信息，以便他们能够了解发生了什么错误并采取相应的行动。Bootstrap 提供了一些内置的类和组件，可以方便地将错误信息显示在 Web 页面上。

Alert 组件

Alert 组件是 Bootstrap 中用于显示警告或错误信息的常用组件。Alert 组件有四种不同的样式：success、info、warning 和 danger。您可以根据需求选择相应的样式。

<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

在上面的示例中，我们使用 alert-danger 类来指定该警告框的样式。您可以根据需求替换为其他样式，如 alert-success、alert-info 或 alert-warning。

表单验证

在表单中，我们经常需要验证用户输入的数据是否符合要求，如果不符合要求，就需要向用户显示相应的错误信息。Bootstrap 提供了一些内置的类和组件，可以方便地将错误信息显示在表单中。

1. 表单验证样式

您可以使用 Bootstrap 的表单验证样式来标记输入控件的状态。当输入控件为空或格式不正确时，可以将其标记为无效状态，并使用红色提示框显示相应的错误信息。

<div class="form-group">
  <label for="inputName">Name</label>
  <input type="text" class="form-control is-invalid" id="inputName" placeholder="Enter your name">
  <div class="invalid-feedback">Please enter your name</div>
</div>

在上面的示例中，我们使用 is-invalid 类将输入控件标记为无效状态，并在下方添加了一个红色提示框，显示相应的错误信息。

2. 表单验证 JS

除了使用表单验证样式外，您还可以使用 Bootstrap 的表单验证 JavaScript，来检查输入控件的内容是否合法。当输入内容不合法时，Bootstrap 会自动为输入控件添加无效状态，并显示相应的错误信息。

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

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

在上面的示例中，我们使用 novalidate 属性来禁用浏览器的默认验证机制。然后，我们使用 JavaScript 来处理表单提交事件。当表单内容不合法时，我们使用 form.checkValidity() 方法检查表单内容是否合法，并为相应的输入控件添加无效状态。最后，我们使用 was-validated 类将表单标记为已验证状态，这可以帮助我们在下一次提交时直接显示错误信息。

总结

以上是 Bootstrap 中常用的两种显示错误信息的方式：Alert 组件和表单验证。您可以根据需求选择适合的方式来显示错误信息。