In diesem Artikel wird ein Bootstrapvalidator.js aus Twitter empfohlen. Bootstrap wird aus Twitter hergestellt, daher ist die Verwendung des ursprünglichen Validators vertrauenswürdiger. Es wird viele Modelle für die Suche nach Bootstrapvalidator auf Baidu geben, aber ich empfehle nur:
1. Schauen Sie sich an
Für eine einfache Einführung finden Sie hier nur ein leerer Scheck.
Bootstrapvalidator Offizielle Download -Adresse
2. Ressourcenreferenz
Nach dem Herunterladen des Ressourcenpakets können Sie das folgende Verzeichnis sehen.
Führen Sie dann die folgenden drei Dateien in Ihr Projekt ein.
<link type = "text/css" rel = "styleSheet" href = "$ {ctx} /components/validate/css/bootstrapvalidator.css"/> <script type = "text/javascript" src = "$ {ctx}/components/validate type = "text/javaScript" src = "$ {ctx} /components/validate/js/Language/zh_cn.js"> </script>3. Die Mitgliedsname ist keine leere Projektkonfiguration
<form action="${ctx}/login" method="post" onsubmit="return validateCallback(this)"> <div> <div> <label>Account</label> <input type="text" autofocus name="username" placeholder="Please enter the member number" autocomplete="off" data-bv-notempty /> </div> </div></form>Data-BV-Nicht-Tempy bedeutet, dass die Mitgliedsnummer als leerer Scheck verwendet werden sollte.
Die DIV der Formgruppe ist erforderlich, sonst wird der Fehler "zu viel Rekursion" gemeldet.
Bei der Übermittlung des Formulars wird die ValidateCallback -Methode ausgeführt. Diese Methode wird speziell in Schritt 5 eingeführt.
4. Aktivieren Sie den Bootstrap Validator nach dem Laden der Seite
$ (function () {// Formular validieren $ ("Form.Required-Validate"). Jeweils (Funktion () {var $ Form = $ (this); });Fügen Sie das Attribut "class =" forders-validate "'im Formularformular hinzu und erhalten Sie dann das entsprechende Formular über JQuery und führen Sie die Standard-Bootstrapvalidator-Belastung durch.
Achten Sie darauf, einige der im obigen Code kommentierten Code zu beachten. Weitere Informationen finden Sie im Folgenden, um die von Bootstrapvalidator eingereichten Fehler wiederholt zu beheben. Der spezifische Inhalt ist wie folgt
Bootstrapvalidator ist sehr schön, aber es gibt oft mörderische Absichten, die unter Ihrem schönen Gesicht versteckt sind. Aus diesem Grund gibt es wiederholte Einreichungsfehler .
Lösung:
// Formular $ $ ("Form.Required-Validate", $ p) .ach (function () {var $ form = $ (this);Legen Sie die On -Methode für Bootstrapvalidator fest, deren Schlüssel erfolgreich ist.
Fehleruntersuchung:
Umfrageergebnisse:
1. Wenn Sie Bootstrapvalidator nicht verwenden, wird es kein Problem geben, wie in der Abbildung gezeigt.
2. Wenn Sie auf das erste Mal klicken, wird die Einreichung zweimal wiederholt. Nach dem Wiedereintritt in den Benutzernamen werden Sie ihn in einem einzigen Zeitpunkt einreichen.
Der Fehler tritt um Umgebung auf:
Kopieren Sie den Code wie folgt: <form action = "$ {ctx}/mem/login? CallbackType = vorwärts" method = "post" onSubmit = "Return validateCallback (this, tabajaxdone)" type = "login"> >> >>>
...
<button type = "senden"> senden </button>
</form>
beschreiben:
Dies ist ein ordentliches Formularformular mit der Anforderungsadresse in der Aktion, und es gibt eine Onsubmit -Methode im Formular, die hauptsächlich zum Überprüfen des Formulars und zum Senden der Anforderung und schließlich die Tabajaxdone -Methode zurückrufen dient.
Fehleranalyse:
1. Es gibt definitiv kein Problem mit der Formform. Wenn es keine Bootstrap -Validierung gibt, gibt es überhaupt kein Problem.
2. Es gab kein Problem bei der Verwendung von JQuery Validate zuvor.
3. Dann kann das Problem nur bei Bootstrap Validate auftreten.
4. Es gibt kein Problem mit der Standardeinsatz von Bootstrap Validate, da dies nur dann wiederholt wird, wenn das erste Klick einreichen.
5. Dann kann dies sein, dass Bootstrap Validate die Standardeinstellungsanforderung hat.
Wenn Sie sich das Validierungsobjekt erneut ansehen, können Sie feststellen, dass es standardmäßig viele Ereignisse gibt, unter denen Formsukzess am misstrauischsten ist, was bedeutet, dass es die Einreichungsanforderung erneut auslösen kann.
Bug -Debugging:
// Formular $ ("Form.Required-Validate", $ p) .each (function () {var $ form = $ (this);1. Wenn die Seite zum ersten Mal geladen wird, muss der Bootstrapvalidator in der obigen Methode geladen werden, bevor die Überprüfung der Front-End-Daten durchgeführt werden kann.
2. Sie haben den kommentierten Code gesehen, vielleicht können Sie ihn erraten, und das ist die Lösung. Richtig, fügen Sie diese Ereignisverarbeitung hinzu, um e.PreventDefault () zu bilden und zu verwenden. Um die Einreichung des Standard -Ereignisses zu verhindern.
5. Überprüfen Sie das Element beim Senden von Formular
Funktion validateCallback (Formular, Rückruf, Bestätigungen) {yunm.debug ("In die Formularabteilung und Einreichung eingeben"); var $ form = $ (Form); var data = $ form.data ('Bootstrapvalidator'); if (Daten) {// Komponenten, die reparieren, verifizieren Sie data.Validate () nicht; if (! data.isvalid ()) {return false; }} $ .ajax ({Typ: Form.Method || 'post', url: $ form.attr ("action"), data: $ form.serializearray (), Datentyp: "json", cache: false, Erfolg: Rückruf || Rückgabe falsch;}Nachdem das Formularformular in ValidateCallback erhalten wurde, kann das Formular über die Isvalid -Methode zurückgegeben werden, um zu überprüfen, ob es passt.
Nachdem die Formularüberprüfung bestanden wurde, senden Sie das Formular über AJAX an den Server.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.