Bootstrap-E-Mail-Validierung

Ich bin mit Bootstrap-Validierung E-Mail-Adresse: 

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

Ich bin mit der novalidate - Eigenschaft können Bootstrap-Validierung der E-Mail selbst.
Meine HTML enthält Bootstrap CSS-und JS-refs. Alles funktioniert einwandfrei.

Aber ich habe paar Fragen:

  1. Wie bootstrap überprüft E-Mail-regex? Wo finde ich den code für diese verantwortlich (ich habe versucht zu schauen, srcs...)?
  2. Kann ich überschreiben, regex, die für die Validierung verwendet (wäre schön, dies zu tun, ohne Bootstrap original code-änderungen)?

Vielen Dank im Voraus.

  • Bootstrap 4.x-Dokumentation umfasst dieses unter Validierung: getbootstrap.com/docs/4.0/components/forms/#how-it-works aber auf die Gefahr drehendes, in Meinung; bootstrap-plugins wie Validator-Griff es 'besser'.
  • Yep, ich sah es, aber ich bin mehr daran interessiert, regex selbst.
  • Da Bootstrap-nur setzt auf die JavaScript-Validierung-API für diese müssen Sie wahrscheinlich vertraut mit dieser API.
  • Meinst du ein formvalidation.io?
  • Ich meine, dass ist sicherlich eine option, aber Nein das ist nicht die JavaScript-Validierung-API (was ist ein Kern-Bestandteil von JavaScript). Das ist ein jQuery-plugin. CSS-Tricks hat einen Artikel über die Nutzung der API: css-tricks.com/...
  • Hab es, danke.

InformationsquelleAutor Pavel | 2018-01-10
  1. 6

    Seine eine späte Antwort, aber für diejenigen, die wissen will, die Antwort für die zweite Frage. Hier ist der Beispiel code, ich habe versucht, und war erfolgreich. Im Grunde können Sie "Muster" - Attribut, um das Eingabefeld.

    JS:

    (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);
})();

    HTML:

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

    • Die obigen Muster nicht validieren, die korrekte E-Mail-Adressen, wie angegeben, in RFC5322 und ist irreführend. Wenn Sie diese auf einem live-website, die Sie blockieren Gültiger Benutzer sein. Sonderzeichen sind erlaubt, in den lokalen Teil der Adresse !#$%&'*+-/=?^_`{|}~ bitte siehe stackoverflow.com/questions/2049502/... und tools.ietf.org/html/rfc5322
    InformationsquelleAutor AKNair
Schreibe einen Kommentar