引导电子邮件验证

Question

我正在使用 Bootstrap 验证电子邮件地址：

<form id="..." novalidate>
...
<div class="form-group">
    <input type="email" class="form-control" id="..." required/>
        <div class="invalid-feedback">
            Please provide a valid email.
        </div>
</div>
...
</form>

我正在使用 novalidate 属性来允许 Bootstrap 验证电子邮件本身。 我的 HTML 包含 Bootstrap CSS 和 JS 引用。一切正常。

但我有几个问题：

1. bootstrap 如何验证电子邮件正则表达式？我在哪里可以找到负责这个的代码（我已经尝试查看 srcs...）？
2. 我能否覆盖用于验证的正则表达式（如果不修改 Bootstrap 原始代码会很好）？

提前致谢。

Answer 1

这是一个迟到的答案，但对于那些想知道第二个问题的答案的人来说。这是示例代码，我尝试过并且成功了。基本上您可以在输入字段中添加“模式”属性。

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    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);
})();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>



<form class="row position-relative flex-column needs-validation" novalidate>
          <input type="email" name="email" placeholder="Your email ID.." class="email white col-7 col-md-4 col-lg-7 ml-3 form-control" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
          <div class="valid-feedback feedback-pos">
            Looks good!
          </div>
          <div class="invalid-feedback feedback-pos">
            Please input valid email ID
          </div>
          <button type="submit" class="btn btn-danger text-uppercase sbmt-btn col-3 col-md-2 col-lg-4 ml-1" value="validate">Submit</button>
        </form>