Bootstrap4验证在IE 11中不起作用

Bootstrap 4 验证在 IE 11 中不起作用的原因主要是因为 IE 11 不支持 HTML5 表单验证特性，而 Bootstrap 4 的表单验证是基于这些特性的。此外，IE 11 对 CSS3 和 JavaScript 的支持也不如现代浏览器，这可能导致 Bootstrap 4 的验证功能无法正常工作。

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4 提供了一套表单验证样式和 JavaScript 插件，用于简化表单验证过程。

类型

Bootstrap 4 的表单验证主要分为两种：

HTML5 表单验证：利用 HTML5 提供的 required、pattern 等属性进行验证。
JavaScript 验证：通过 Bootstrap 提供的 JavaScript 插件进行更复杂的验证。

应用场景

Bootstrap 4 的表单验证适用于需要用户输入数据的网站，如注册、登录、表单提交等页面。

解决方法

为了使 Bootstrap 4 的表单验证在 IE 11 中正常工作，可以采取以下措施：

使用 Polyfill：使用 html5shiv 和 respond.js 来支持 IE 11 对 HTML5 和 CSS3 的支持。
使用 Polyfill：使用 html5shiv 和 respond.js 来支持 IE 11 对 HTML5 和 CSS3 的支持。
自定义 JavaScript 验证：如果 HTML5 验证不起作用，可以编写自定义的 JavaScript 验证逻辑。
自定义 JavaScript 验证：如果 HTML5 验证不起作用，可以编写自定义的 JavaScript 验证逻辑。
确保兼容性：确保所有使用的 JavaScript 库和 CSS 文件都兼容 IE 11。

示例代码

以下是一个简单的示例，展示如何在 Bootstrap 4 中实现表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Form Validation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    .was-validated .form-control:invalid {
      border-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <form class="needs-validation" novalidate>
      <div class="form-group">
        <label for="email">Email address</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>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var forms = document.querySelectorAll('.needs-validation');
      Array.prototype.forEach.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  </script>
</body>
</html>