Question

我正尝试使用新的Bootstrap 4，像equalTo一样验证我的表单的电子邮件。如果可能的话，我只想使用Bootstrap 4，而不必包含任何其他库。我认为它只需要底部javascript中的某些内容即可检查匹配字段。任何帮助表示赞赏。我很惊讶没有其他人要求这样做，或者实际上Bootstrap网站上没有一个示例。我想这是一个普遍的要求。

<!DOCTYPE html>
<html>

<head>
  <title>JQuery-validation demo | Bootstrap</title>
  <?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>
</head>

<body>
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-4 mb-3">
        <label for="validationCustom01">Email</label>
        <input type="Email" class="form-control" id="email" placeholder="Email" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <label for="validationCustom02">Confirm Email</label>
        <input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" required>
        <div class="valid-feedback">
          Emails should match
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
      Agree to terms and conditions
    </label>
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (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');

        // check match

        // 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>
</body>

</html>

Answer 1

尝试正确使用所有链接...它将起作用

// Example starter JavaScript for disabling form submissions if there are invalid fields
    (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');

        // check match

        // 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();
            }
            var email = $("#email").val();
            var confirmemail = $("#confirm_email").val();
            if(email !== confirmemail){ 
            form.classList.add('was-validated');
              $("#validate").html("Email Should Match");
              $("#validate").addClass("error");
               $("#confirm_email").addClass("error-text");
              event.preventDefault();
              event.stopPropagation();              
            }
            else{
            $("#validate").removeClass("error");
            form.classList.add('was-validated');
               $("#confirm_email").removeClass("error-text");
              $("#validate").html("Looks Good!");
            }
           
          }, false);
        });
      }, false);
    })();

.error{
color:red !important;
}
.error-text{
border:1px solid red !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>JQuery-validation demo | Bootstrap</title>
  <!--<?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-4 mb-3">
        <label for="validationCustom01">Email</label>
        <input type="Email" class="form-control" id="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <label for="validationCustom02">Confirm Email</label>
        <input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
       
        <div id="validate" class="valid-feedback">
          Emails should match
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
      Agree to terms and conditions
    </label>
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>
</body>

</html>

Answer 2

<form>
  
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email" required>
 
    <button>Submit</button>
  
</form>

使用默认验证的Bootstrap 4表单验证电子邮件检查

2 个答案: