Bootstrap电子邮件验证

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 refs.一切正常.

但我有几个问题:

1. bootstrap如何验证电子邮件正则表达式？我在哪里可以找到对此负责的代码(我试过看看srcs ......)？
2. 我可以覆盖用于验证的正则表达式(如果没有Bootstrap原始代码修改,这样做会很好吗？)

提前致谢.

Answer 1

这是一个迟到的答案,但对于那些想知道第二个问题答案的人.这是示例代码,我试过并且成功了.基本上,您可以在输入字段中添加"pattern"属性.

(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>