Einer der wichtigsten Punkte in der Webentwicklung, der manchmal vernachlässigt oder nicht beachtet wird, ist die Validierung der Formulare und der Felder, aus denen sie bestehen. Diese Validierungen reichen von den Werten, die akzeptiert werden können, bis zur Länge von selbst bis zu der Tatsache, ob sie notwendig sind oder nicht.
Diese Überprüfungen auf der Clientseite wurden in der Vergangenheit mithilfe von Javascript durchgeführt. Dabei wurden umständliche Funktionen erstellt, um einige Felder zu überprüfen und Ergebnisse zu erzielen, die nicht immer optimal waren. Sie wurden auch ausgewählt, um die Serverseite zu überprüfen. Dies bot dem Benutzer jedoch keine Erfahrung freundlich, da wir zuerst die Daten verarbeiten und auf die Antwort vom Server warten mussten, um zu überprüfen, ob alle unsere Daten korrekt waren.
Nachdem man mit reinem Javascript gearbeitet hat , um alle Arten von Operationen auf der Client-Seite durchzuführen, scheinen Frameworks Dinge zu erleichtern, darunter eines der bekanntesten: jQuery ; Mit einer vordefinierten Struktur und einer saubereren und besseren Vorgehensweise war es möglich, alle schlechten Praktiken hinter sich zu lassen und dem Entwickler ein viel vollständigeres Tool zur Verfügung zu stellen, um diese Vorgänge einschließlich Validierungen zu erreichen.
Obwohl jQuery viele Operationen auf der Client-Seite ermöglichte, wurde noch nichts entwickelt, das das Problem der Validierungen direkt anging. Aus diesem Grund wurde das Bootstrap Validator- Plugin erstellt, das alle Vorteile von jQuery und nutzt des HTML5- und CSS3- Frameworks, Bootstrap .
1. Bootstrap Validator
Bootstrap Validator ist ein Plugin, das auf jQuery und Bootstrap basiert. Es ermöglicht die Validierung von Formularen sowie der darin enthaltenen Elemente durch einfache Einbindung der Bibliotheken des Plugins und die Verwendung seiner leistungsstarken, aber einfachen API , ohne dabei alles zu vergessen Die Eigenschaften, die er selbst hat, sehen wir uns an:
- Integration mit Bootstrap- Schriftarten und -Stilen.
- Vordefinierte Überprüfungen von Feldern, die unter anderem die Länge des Inhalts, Daten, Kreditkarten, Telefone und E-Mails umfassen.
- Benutzerdefinierte Überprüfungen für Felder.
- Möglichkeit des Hinzufügens mehrerer Validierungen pro Feld.
- Möglichkeit, ein Feedback-Symbol entsprechend dem Ergebnis der Validierung anzuzeigen.
- Möglichkeit der Verwendung von Nachrichten im HTML entsprechend dem Ergebnis der Validierung.
Wie wir sehen konnten, ist dies die erste Option, die für die Implementierung von Validierungen in unseren Projekten in Betracht gezogen werden muss.
2. Validatoren
Bevor Sie den praktischen Teil dieses Tutorials vollständig durcharbeiten, müssen Sie einige der wichtigsten Validatoren kennen, mit denen Bootstrap Validator die Validierungen in den Formularen verarbeitet. Siehe:
Dies ist nur ein kleiner Auszug aus dem gesamten Validator-Repertoire, das wir in Bootstrap Validator haben. Die vollständige Liste der Validatoren können wir hier eingeben und diejenige konsultieren, die unseren Anforderungen am besten entspricht:
3. Anmeldeformular
Einer der wichtigsten Aspekte jeder aktuellen Website ist das Anmeldeformular , mit dem sich unsere Benutzer mit ihrem Benutzernamen und Passwort auf unserer Seite anmelden und zusätzliche Vorteile bei der Anmeldung genießen können.
Mit dem Bootstrap Validator können wir diese beiden Felder mit ein paar einfachen Codezeilen validieren. Mit Bootstrap können wir dem Feld einen zusätzlichen Touch verleihen, indem wir auf einfache Weise ein modales Fenster implementieren und so ein Anmeldeformular erstellen, das professionell und ansprechend aussieht des Benutzers.
Damit wir den Quellcode der oben genannten Dateien nicht ändern, fügen wir sie aus dem jeweiligen CDN hinzu . Zuerst fügen wir die .css- Dateien von Boostrap und Bootstrap Validator hinzu :
<link href = "// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel = "stylesheet"> </ link> <link href = "// oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel = "stylesheet"> </ link
Jetzt werden wir die .js- Dateien einschließen und, um eine deutlich übersichtlichere Struktur zu haben, den Code unserer Überprüfungen in einer Datei namens validator.js trennen:
<script src = "// oss.maxcdn.com/jquery/1.11.1/jquery.min.js"> </ script> <script src = "// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> <script src = "// oss.maxcdn.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </ script> <script type = "text / javascript" src = "validator.js"> </ script>
Dann werden wir die Vorteile von Bootstrap nutzen, um unser modales Fenster zu erstellen. Durch Anwenden der erforderlichen Klassen auf die Elemente, aus denen es besteht, wird die gewünschte Funktionalität angewendet:
<div class = "loginbtn" align = "center" style = "margin: 100px;"> <button type = "button" class = "btn btn-default" data-toggle = "modal" data-target = "# loginModal"> <span class = "glyphicon glyphicon-log-in"> </ span> Anmeldeformular </ button> </ div> <div class = "modal fade" id = "loginModal" tabindex = "- 1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> & times; </ button> <h4 class = "modal-title"> Anmelden </ h4> </ div> <div class = "modal-body"> <form id = "loginForm" method = "post" class = "form-horizontal" action = "none"> <div class = "form-group"> <label class = "col-md-3 control-label"> Benutzername </ label> <div class = "col-md-7"> <input type = "text" class = "form-control" name = "user" /> </ div> </ div> <div class = "form-group"> <label class = "col-md-3 control-label"> Passwort </ label> <div class = "col-md-7"> <input type = "password" class = "form-control" name = "password" /> </ div> </ div> <div class = "form-group"> <div class = "col-md-5 col-md-offset-3"> <button type = "submit" class = "btn btn-default"> Anmelden </ button> </ div> </ div> </ form> </ div> </ div> </ div> </ div>
Mal sehen, wie unser Beispiel bisher aussieht, wenn wir es im Browser ausführen:
Wir haben bereits unser modales Fenster, das zusammen mit unserem Formular funktioniert. Jetzt müssen wir nur noch die Validierungen mit Bootstrap Validator einbeziehen , um ein Dokument zu initialisieren. Bereits in unserer Datei validator.js rufen wir die Methode boostrapValidator () auf :
$ ('# loginForm'). bootstrapValidator ({ message: 'Dieser Wert ist ungültig', feedbackIcons: { gültig: 'glyphicon glyphicon-ok', ungültig: 'glyphicon glyphicon-remove', Validierung: 'Glyphicon Glyphicon-Refresh' }, Felder: { Benutzer: { Validatoren: { notEmpty: { message: 'Der Benutzername ist erforderlich' } } }, Passwort: { Validatoren: { notEmpty: { message: 'Das Passwort ist erforderlich' } } } } });
Das Erste, was wir in diesem Code bemerken sollten, ist die Verwendung des Selektors zum Initialisieren der Methode. In diesem Fall verwenden wir die ID des Formulars namens loginForm , um durch den DOM-Baum zu gehen und die Elemente unter der Hierarchie zu erreichen . Anschließend definieren wir eine allgemeine Meldung und die Feedback-Symbole, um unserem Formular bei Erfolg oder Fehlern bei der Validierung eine visuelle Note zu verleihen.
Schließlich haben wir unsere Validierungen und wie wir auf den ersten Blick sehen können, ist diese in höchstem Maße lesbar und unübertroffen einfach. Wir geben den Namen der Felder unserer Formulare an und in diesem Beispiel werden wir eine einzige Validierung verwenden, die das erforderliche Feld ist, aber wie wir besprochen haben Sie können mehr als eins pro Feld sein.
In der folgenden Abbildung sehen wir, wie unser Formular aussieht, wenn wir versuchen, die Informationen zu senden, ohne die Felder ausgefüllt zu haben:
Wie wir unsere Validierungen sehen und bis Sie Informationen in die Felder eingeben, führt das Formular die Übermittlung nicht aus , da die Schaltfläche standardmäßig deaktiviert ist. Sehen wir uns in der folgenden Abbildung an, wie unser Formular aussieht, wenn wir die erforderlichen Daten eingeben und die Feedback-Symbole sich ändern demnach:
Dank Bootstrap Validator konnten wir in wenigen Minuten ein Anmeldeformular mit den entsprechenden Überprüfungen auf der Clientseite erstellen .
4. Registrierungsformular
Der vorherige Fall ist einfach und sehr nützlich, aber er ist nicht der einzige, der in den Entwicklungen vorhanden ist. Es gibt Registrierungsformulare, die viel mehr Felder enthalten, und die Einschränkungen hinsichtlich der einzugebenden Informationen sind unterschiedlich.
Dies stellte in der Vergangenheit ein Problem dar, da abhängig von der Anzahl der Felder ein Zähler ausgeführt werden musste und die Überprüfung Feld für Feld durchgeführt werden musste. Wenn dieser Zähler eine bestimmte Anzahl erreichte, bedeutete dies, dass es keine Fehler gab, ohne die einzelnen Überprüfungen von jedem zu vergessen Feld als Datumsformat, das nur Zahlen oder sogar die Länge des Feldes akzeptiert.
Mit dem Boostrap Validator und seinen vordefinierten Validatoren können wir diese Aufgabe auf einfache und schnelle Weise lösen. Sehen wir uns Folgendes an :
Zuerst werden wir die Dateien .css und .js einbinden , die wir im vorherigen Beispiel verwendet haben. Zusätzlich werden wir einige Bibliotheken einbinden , um den Datenzeitmesser von Boostrap verwenden zu können:
<link rel = "stylesheet" href = "https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css "/> <script src = "// oss.maxcdn.com/momentjs/2.8.2/moment.min.js"> </ script> <script src = "https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"> </ script>
Sobald dies erledigt ist, erstellen wir unser Formular und geben jedem Feld einen passenden Namen:
<form id = "registrationForm" method = "post" class = "form-horizontal half" action = "#"> <h2> Registrierungsformular </ h2> <div class = "form-group"> <label class = "col-lg-3 control-label"> Namen </ label> <div class = "col-lg-3"> <input type = "text" class = "form-control" name = "name" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> Nachname </ label> <div class = "col-lg-3"> <input type = "text" class = "form-control" name = "nachname" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> E-Mail </ label> <div class = "col-lg-3"> <input type = "text" class = "form-control" name = "email" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> Passwort </ label> <div class = "col-lg-3"> <input type = "password" class = "form-control" name = "password" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3-Kontrolletikett"> Geburtsdatum </ label> <div class = "col-lg-3"> <input type = "text" class = "formular control" name = "datentimer" id = "datentimer" data-date-format = "JJJJ-MM-TT" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> ***** </ label> <div class = "col-lg-9"> <div class = "radio"> <label> <input type = "radio" name = "*****" value = "M" /> Männlich </ label> </ div> <div class = "radio"> <label> <input type = "radio" name = "*****" value = "F" /> Weiblich </ label> </ div> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> Telefon </ label> <div class = "col-lg-3"> <input type = "text" class = "form-control" name = "phone" /> </ div> </ div> <div class = "form-group"> <label class = "col-lg-3 control-label"> Mobiltelefon </ label> <div class = "col-lg-3"> <input type = "text" class = "form-control" name = "telefono_cel" /> </ div> </ div> <div class = "form-group"> <div class = "col-lg-9 col-lg-offset-3"> <button type = "submit" class = "btn btn-success left"> Registrieren </ button> </ div> </ div> </ form>
Mal sehen, wie dieses Formular in unserem Browser aussieht:
Bevor wir mit den Überprüfungen fortfahren , ist es wichtig, dass wir unseren Daten-Zeitmesser dafür verwenden. Wir müssen nur die folgenden Codezeilen in unsere validator.js- Datei aufnehmen und ihm die ID geben, die unser Feld im Formular hat:
$ (function () { $ ('# datetimepicker'). datetimepicker ({ pickTime: false }); });
Mal sehen, wie dieses Add-On aussieht:
Wie wir sehen konnten, enthält das Formular gemischte Felder, einschließlich Text, Kennwortfelder, Datums- / Uhrzeitauswahl und sogar Optionsfelder. Dies ist jedoch kein Problem für Bootstrap Validator . Wir werden dieselbe Datei validator.js für Überprüfungen verwenden, für die wir nur eine neue Instanz erstellen sollten der boostrapValidator- Methode mit der ID des neuen Formulars und dort enthalten die gleichen:
$ ('# registrationForm'). bootstrapValidator ({ feedbackIcons: { gültig: 'glyphicon glyphicon-ok', ungültig: 'glyphicon glyphicon-remove', Validierung: 'Glyphicon Glyphicon-Refresh' }, Felder: { name: { Validatoren: { notEmpty: { message: 'Der Name ist erforderlich' } } }, Nachname: { Validatoren: { notEmpty: { message: 'Der Nachname ist erforderlich' } } }, email: { Validatoren: { notEmpty: { message: 'Mail ist erforderlich und darf nicht leer sein' }, emailAddress: { message: 'Die E-Mail ist ungültig' } } }, Passwort: { Validatoren: { notEmpty: { message: 'Das Passwort ist erforderlich und darf nicht leer sein' }, stringLength: { min: 8, message: 'Das Passwort muss mindestens 8 Zeichen enthalten' } } }, Datum / Uhrzeit: { Validatoren: { notEmpty: { Meldung: 'Das Geburtsdatum ist erforderlich und darf nicht leer sein' }, Datum: { Format: 'JJJJ-MM-TT', Meldung: 'Das Geburtsdatum ist ungültig' } } }, *****: { Validatoren: { notEmpty: { message: 'Die ***** ist erforderlich' } } }, telefono: { Nachricht: 'Das Telefon ist ungültig', Validatoren: { notEmpty: { Meldung: 'Das Telefon ist erforderlich und darf nicht leer sein' }, Regexp: { regulärer Ausdruck: / ^ [0-9] + $ /, Nachricht: 'Das Telefon kann nur Nummern enthalten' } } }, telefono_cel: { Nachricht: 'Das Telefon ist ungültig', Validatoren: { Regexp: { regulärer Ausdruck: / ^ [0-9] + $ /, Nachricht: 'Das Telefon kann nur Nummern enthalten' } } }, } });
Wir können sehen, dass die ersten beiden Überprüfungen dem vorherigen Beispiel ähnlich sind, aber wenn wir das Feld der E-Mail finden, sehen wir, dass es die Überprüfung des erforderlichen Felds enthält und zusätzlich mit dem Validator emailAdress überprüfen wir , ob es eine gültige E-Mail ist Diese Validierung:
Mit dem Datumspicker haben wir keine Probleme bei der Eingabe von Datumsangaben. Wenn wir dies jedoch so sauber wie möglich erhalten möchten, können wir das Format validieren, wie wir in der folgenden Validierung sehen können, in der wir angeben, dass das Format für was JJJJ-MM-TT sein soll gültig sein:
Mit stringLength und der Option min können wir sogar überprüfen, wie viele Zeichen das Passwort enthalten darf:
Um die Leistungsfähigkeit dieses Plugins zu vervollständigen und zu demonstrieren, werden wir das Telefon validieren. Wir könnten den Ziffernvalidator verwenden. In diesem Fall werden wir jedoch einen komplexeren Ausdruck als regulären Ausdruck verwenden. Das Beste ist, dass wir dafür bereits einen Validator haben: den regulären Ausdruck Mal sehen, wie es in unserem Formular funktioniert:
Nachdem wir bereits bewiesen haben, dass alle unsere Validierungen korrekt funktionieren, werden wir alle Informationen in unserem Formular korrigieren und sehen, wie es mit den entsprechenden Informationen aussieht:
Damit schließen wir dieses Tutorial ab, in dem wir gelernt haben, die Validierungen von Boostrap Validator zu verwenden , einem leistungsstarken Plugin, das keine Installation oder Konfiguration erfordert und das es uns ermöglicht, unsere Formulare schnell und einfach mit ein paar einfachen Codezeilen zu validieren.
