Einführung in die Bootstrap-Formularüberprüfung
Die Validierung wird verwendet, um die Akzeptanz mit einigen Regeln und Vorschriften zu bilden. Bootstrap verfügt über viele Klassen, um ein Formular zu erstellen. Für die Validierung sind jedoch Kontrolldaten über das Formular erforderlich. In diesem Thema lernen wir die Arten der Bootstrap-Formularüberprüfung kennen.
Das Formular verfügt beispielsweise über ein Kennwort. Passwort hat viele Regeln nach Anforderungen. Jemand braucht Buchstaben, viele brauchen Ziffern, ansonsten benötigt jemand Sonderzeichen. Der Benutzer kennt die Erfüllung der Anforderung, die Validierung ist wichtig.
Manchmal erhält der Benutzer nicht die genauen Anforderungen des Formulars oder wie viel erforderlich, um zu erfüllen, diese Zeitvalidierung ist hilfreich, um Daten korrekt zu übermitteln. Wenn Sie die Spezifikation nicht erfüllen, erhalten Sie das Feedback automatisch im Formular.
Wie überprüfe ich Formulare mit Bootstrap?
- Mit dem Bootstrap-Formular kann die Validierung alle Komplikationen der JavaScript-Codierung überwinden und problemlos mit Klassen arbeiten.
- Die Validierung von drei Bootstrap-Formularen wird mit Glyphicon geliefert, um die Meldung über Fehler, Warnung und Erfolg zu erhalten. Validierungsklassen werden immer in die übergeordnete Klasse eingefügt.
- Neben den Validierungsklassen ist auch die Klasse has-feedback erforderlich, um das Symbol zusammen mit der Bezeichnung an der richtigen Stelle im Formulareingabefeld zu platzieren. Diese Klasse wird in die übergeordnete Klasse eingefügt.
Beispiel:
Die Form-Control-Feedback-Klasse war auch mit dem Glyphicon-Symbol erforderlich, um das Symbol im Feld des Eingabeformulars festzulegen.
Beispiel:
Arten der Bootstrap-Formularüberprüfung
Es gibt 3 Arten von Bootstrap-Formularen:
1. has-erfolg
Diese Klasse wurde verwendet, um die Nachricht des Erfolgs zu erhalten. Mit dieser Validierungsklasse benötigen Benutzer auch das Symbol „Glyphicon Glyphicon-Ok“, um das Symbol des Erfolgs anzuzeigen. Wenn der Benutzer die Eingabe im Formular korrekt eingibt, hat diese Validierung funktioniert.
Die Klasse mit Erfolg wartet mit einer Elternklasse auf. Um die Erfolgsmeldung zu erhalten, wird diese Validierung verwendet. Das folgende Beispiel zeigt das horizontale Format. Die Ausgabe erfolgt mit der Meldung in grüner Farbe.
Syntax:
.
Beispiel:
Paasword
Ausgabe:
2. has-warnung
Diese Klasse wird für Warnmeldungen bei der Formulareingabe verwendet. Mit dieser Validierungsklasse benötigen Benutzer auch ein Symbol „Glyphicon Glyphicon Warning-Sign“, um das Warnsymbol anzuzeigen. Wenn wir die falsche Eingabe in das Formular eingeben, haben wir eine weitere Chance, die Eingabe einzugeben, wenn die Validierung der Zeitwarnung funktioniert hat.
Warnungsüberprüfungsklasse, die in eine übergeordnete Klasse mit einer Klasse mit Rückmeldung eingefügt wird. Wenn der Benutzer auf einen Fehler hingewiesen wird, hat diese Klasse funktioniert. Das Ergebnis ist eine gelbe Meldung.
Syntax:
.
Beispiel:
Paasword
Ausgabe:
3. has-error
Diese Klasse wird für Fehlermeldungen bei der Formulareingabe verwendet. Mit dieser Validierungsklasse benötigen Benutzer auch das Symbol „Glyphicon Glyphicon-Remove“, um das Fehlersymbol anzuzeigen. Wenn wir die falsche Eingabe in das Formular eingeben, hat diese Validierung funktioniert.
Fehlervalidierungsklasse, die in die übergeordnete Klasse mit einer has-feedback-Klasse eingefügt wird. Wenn der Benutzer die Fehlermeldung eines Fehlers erhält, hat diese Klasse funktioniert.
Syntax:
Beispiel:
Paasword
Ausgabe:
Beschreibung: Alle Formulare sind horizontal angeordnet. Das Label hat 2 Spalten und die Eingabe hat 10 Spalten. Validierungsklasse mit Rückmeldung an übergeordnetes Div. Um das Symbol zu sehen, verwendete der Benutzer Glyphicon-Symbole mit Form-Control-Feedback in der
Benutzer arbeiten am Passwort. Entweder ist das Passwort korrekt, dann funktioniert die Erfolgsprüfung, oder das Passwort ist falsch, dann funktioniert die Fehlerprüfung. Wenn das Passwort einen Fehler aufweist und wir in der Lage sind, das Problem zu beheben, funktioniert die Überprüfung der Warnung.
Beispiele für die Validierung von Bootstrap-Formularen
Nachfolgend sind die verschiedenen Beispiele für die Validierung von Bootstrap-Formularen aufgeführt:
Beispiel 1
Das folgende Beispiel ist die Validierung mit der horizontalen Form. Das Glyphicon-Zeichen wird im inneren Eingabefeld des Formulars bearbeitet. Beschriftung und Eingabe in einer horizontalen Zeile, aber alle Formulargruppenklassen werden vertikal platziert.
Success
Warning
Error
Ausgabe:
Beispiel # 2
Das folgende Beispiel ist die Validierung mit der vertikalen Form. In der vertikalen Form sind alle Beschriftungen und Eingaben vertikal angeordnet. Glyphicon kann in der Zeile des Etiketts am Ende des Eingabefelds stehen.
Das Formular enthält keine Klasse. Es wird bei der Formularüberprüfung in Bootstrap selten verwendet.
Success
Warning
Error
Ausgabe:
Beispiel # 3
Das folgende Beispiel ist die Validierung mit dem Inline-Formular. Das Inline-Formular enthält alle Bezeichnungen und Eingaben in einer Zeile, einschließlich aller Formulargruppen. Dies ist ein kompliziertes, aber gültiges Symbol, das im Eingabefeld des Formulars angezeigt wird.
Wenn Benutzer nur ein kleines Formular und ein Anmeldeformular mit Validierungen benötigen, kann das Inline-Formular angewendet werden.
Success
Warning
Error
Ausgabe:
Vor allem Beispiel hat alle Validierungstypen mit allen Layouts und wie es funktioniert. Wählen Sie je nach Benutzeranforderung und Einfachheit das Format für die Formularüberprüfung und das Layout aus.
Fazit
Meistens erfolgt die Formularüberprüfung auf der Serverseite, um die Formulardaten in einer Datenbank zu steuern. Für diese Zwecke erhalten wir viele komplizierte Codierungen und verwenden die Validierungsmethode in JavaScript.
Bootstrap hat alles auf einer Formularseite erledigt, Komplikationen und langwieriges Codieren vermieden und die Formulardaten mühelos kontrolliert.
Empfohlene Artikel
Dies ist eine Anleitung zur Bootstrap-Formularüberprüfung. Hier diskutieren wir die 3 Arten der Bootstrap-Formularvalidierung zusammen mit den entsprechenden Beispielen. Sie können sich auch den folgenden Artikel ansehen.
- Bootstrap-Layout
- Bootstrap-Komponenten
- Was ist Bootstrap?
- Bootstrap-Befehle
- Bootstrap-Formularlayout mit Beispielen
- Formulare in JavaScript | Programm zur Formularvalidierung