Einer der wichtigsten Punkte in der Webentwicklung und der manchmal vernachlässigt oder nicht die nötige Aufmerksamkeit geschenkt wird, ist der Formularvalidierung und der Felder, aus denen sie bestehen, reichen diese Validierungen von den Werten, die sie akzeptieren können, ihrer Länge bis hin zu der Tatsache, ob sie erforderlich sind oder nicht.
Diese Validierungen der Kundenseite in der Vergangenheit wurden sie durchgeführt von Javascript Umständliche Funktionen zu erstellen, um einige Felder zu validieren und Ergebnisse zu erzielen, die nicht immer die optimalsten waren, wurde auch ausgewählt, um die Serverseite Dies bot dem Benutzer jedoch keine benutzerfreundliche Erfahrung, da wir zuerst die Daten verarbeiten und auf die Antwort des Servers warten mussten, um zu überprüfen, ob alle unsere Daten korrekt waren.
Nach einiger Zeit ordentlich gearbeitet Javascript Um alle Arten von Operationen auf der Client-Seite durchzuführen, scheinen Frameworks die Dinge einfacher zu machen, darunter eines der bekanntesten: jQuery; Mit einer vordefinierten Struktur und einer saubereren und optimierten Vorgehensweise war es möglich, alle schlechten Praktiken hinter sich zu lassen und dem Entwickler ein viel umfassenderes Werkzeug zur Verfügung zu stellen, um diese Vorgänge einschließlich der Validierungen durchzuführen.
Aber obwohl jQuery viele Operationen auf der Client-Seite erleichtert hat, war noch nichts entwickelt worden, was das Problem der Validierungen direkt angreifen würde, deshalb das Plugin von Bootstrap-Validator die alle Vorteile von . nutzt jQuery und der Rahmen von HTML5 Ja CSS3, Bootstrap.
1. Bootstrap-Validator
Bootstrap-Validator ist ein Plugin, das auf basiert jQuery Ja Bootstrap, es ermöglicht die Validierung von Formularen sowie der darin enthaltenen Elemente mit einer einfachen Einbeziehung der Plugin-Bibliotheken und der Verwendung seiner leistungsstarken, aber einfachen API, dies, ohne alle Eigenschaften zu vergessen, die es hat, sehen wir uns einige davon an:
- Integration mit Schriftarten und Stilen Bootstrap.
- Vordefinierte Feldvalidierungen, die unter anderem Folgendes umfassen: Inhaltslänge, Daten, Kreditkarten, Telefone, E-Mail.
- Benutzerdefinierte Validierungen für Felder.
- Möglichkeit, mehrere Validierungen pro Feld hinzuzufügen.
- Möglichkeit, ein Feedback-Symbol entsprechend dem Validierungsergebnis anzuzeigen.
- Möglichkeit der Verwendung von Nachrichten in der HTML nach dem Validierungsergebnis.
Wie wir sehen konnten, machen diese Eigenschaften es zur ersten Option für die Implementierung von Validierungen in unseren Projekten.
Was brauchen wir, um es zu benutzen?Um nutzen zu können Bootstrap-Validator wir müssen einschließen jQuery in der neuesten Version vorzugsweise, Bootstrap von deiner version 3.x und die Dateien .css Ja .js aus der Buchhandlung. Zusätzlich benötigen wir eine Webserver-Installation wie Wamp wenn wir daran arbeiten Fenster oder Lampe In Linux.
2. Validatoren
Bevor Sie mit dem praktischen Teil dieses Tutorials beginnen, ist es wichtig, einige der wichtigsten Validatoren zu kennen, die es verwendet. Bootstrap-Validator für die Handhabung von Validierungen innerhalb der Formulare sehen wir uns Folgendes an:
base64Validiert eine Base-64-codierte Zeichenfolge.
zwischenPrüfen Sie, ob der Wert eines Feldes genau zwischen zwei gegebenen Zahlen liegt oder nicht.
KreditkarteBestätigen Sie eine Kreditkartennummer.
DatumValidieren Sie ein Datum anhand bestimmter Optionen, unter denen das Format, ein maximales, minimales Datum und sogar ein Trennzeichen hervorstechen.
ZiffernGibt true oder true zurück, wenn der Wert nur Zahlen enthält.
E-Mail-AdresseWie der Name schon sagt, validiert es eine E-Mail-Adresse.
regexpÜberprüft, ob der angegebene Wert mit einem regulären Ausdruck von übereinstimmt oder diesem entspricht Javascript.
Dies ist nur ein kleiner Auszug aus dem kompletten Repertoire an Validatoren, die wir in haben Bootstrap-ValidatorFür die vollständige Liste der Validatoren können wir hier eingeben und denjenigen auswählen, der unseren Anforderungen am besten entspricht:
3. Login Formular
Einer der wichtigsten Aspekte einer aktuellen Website ist die Login Formular, wo unsere Nutzer mit ihrem Benutzernamen und Passwort unsere Seite betreten und beim Einloggen zusätzliche Vorteile genießen können.
Bootstrap-Validator ermöglicht es uns, diese beiden Felder zusätzlich mit ein paar einfachen Codezeilen zu validieren Bootstrap ermöglicht es uns, ihm eine zusätzliche Note zu verleihen, indem wir auf einfache Weise ein modales Fenster implementieren und so ein Anmeldeformular erstellen, das für das Auge des Benutzers professionell und angenehm aussieht.
Da wir keine Änderungen am Quellcode einer der oben genannten Dateien vornehmen, werden wir sie aus ihren jeweiligen CDN, zuerst werden wir die Dateien einschließen .css so viel von Boostrap mögen Bootstrap-Validator:
Jetzt werden wir die Dateien einbinden .js und um eine viel sauberere Struktur zu haben, werden wir den Code unserer Validierungen in einer Datei namens . trennen validator.js:
Dann nutzen wir die Vorteile von Bootstrap um unser modales Fenster zu erstellen, das nur durch Anwenden der erforderlichen Klassen auf die Elemente, aus denen es besteht, die gewünschte Funktionalität angewendet wird:
Login Formular×Sehen wir uns an, wie unser Beispiel bisher aussieht, wenn wir es im Browser ausführen:Anmeldung
NutzernamePasswortAnmeldung
Wir haben bereits unser modales Fenster zusammen mit unserem Formular in Betrieb, jetzt müssen wir nur noch die Validierungen mit einschließen Bootstrap-Validator, dafür werden wir a . initialisieren document.ready in unserer Datei validator.js und darin nennen wir die Methode boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'This value is not valid', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, Felder: {user: {validators: {notEmpty: {message: 'Username is required'}}}, password: {validators: {notEmpty: {message: 'Password is required'}}}}} ); 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 aufgerufenen Formulars Login Formular, das geht durch die DOM-Baum und gelangen Sie zu den Elementen darunter in der Hierarchie. Anschließend definieren wir eine allgemeine Nachricht und die Feedback-Icons, um unserem Formular bei Erfolg oder Fehler bei den Validierungen eine optische Note zu verleihen.
Schließlich haben wir unsere Validierungen und wie wir auf einen Blick sehen können, dass es etwas sehr Lesbares und von unvergleichlicher Einfachheit ist, geben wir den Namen der Felder unserer Formulare an und verwenden in diesem Beispiel eine einzige Validierung, die die des Pflichtfeld, aber wie bereits erwähnt, können es mehr als eines pro Feld sein.
Sehen wir uns im folgenden Bild an, wie unser Formular aussieht, wenn wir versuchen, die Informationen zu senden, ohne die Felder ausgefüllt zu haben:
Wie wir sehen, dass unsere Validierungen funktionieren und bis die Informationen in die Felder eingegeben wurden, führt das Formular die einreichen Da die Schaltfläche standardmäßig deaktiviert ist, sehen wir uns im folgenden Bild an, wie unser Formular aussieht, wenn wir die erforderlichen Daten eingeben und sich die Feedback-Symbole entsprechend ändern:
In wenigen Minuten konnten wir ein Anmeldeformular mit den entsprechenden clientseitigen Validierungen erstellen, dank Bootstrap-Validator.
4. Anmeldeformular
Der vorherige Fall ist einfach und sehr nützlich, aber er ist nicht der einzige in den Entwicklungen, es gibt Registrierungsformulare, die viel mehr Felder enthalten und die Einschränkungen bezüglich der einzugebenden Informationen sind unterschiedlich.
Dies stellte in der Vergangenheit ein Problem dar, da je nach Anzahl der Felder ein Zähler durchgeführt und Feld für Feld validiert werden musste und wenn dieser Zähler eine bestimmte Anzahl erreichte, gab es keine Fehler, dies ohne die einzelnen Validierungen von zu vergessen jedes Feld, z. B. Datumsformate, die nur Zahlen oder sogar die Länge des Felds akzeptieren.
Mit Boostrap-Validator und seine vordefinierten Validatoren helfen uns bei dieser Aufgabe auf einfache und schnelle Weise, mal sehen:
Zuerst werden wir die Dateien einbinden .css Ja .js die wir im vorherigen Beispiel verwendet haben, werden wir zusätzlich einige Bibliotheken einbinden, um die Datums-/Uhrzeitauswahl von Boostrap:
Sobald dies erledigt ist, erstellen wir unser Formular und geben jedem Feld einen passenden Namen:
Sehen wir uns an, wie dieses Formular in unserem Browser aussieht:Anmeldeformular
NamenNachnamenEmailPasswortGeburtsdatum*****MännlichFemininTelefonMobiltelefonEinchecken
Bevor wir zu den Validierungen übergehen, ist es wichtig, dass wir unsere Datums-/Uhrzeitauswahl dazu müssen wir nur die folgenden Codezeilen in unsere Datei aufnehmen validator.js und geben Sie ihm die ID, die unser Feld im Formular hat:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Mal sehen, wie dieses Plugin aussieht:
Wie wir sehen konnten, hat das Formular gemischte Felder, darunter Text, Passwortfelder, Datums-/Uhrzeitauswahl und sogar Optionsfelder, aber das ist kein Problem für Bootstrap-Validator, wir werden dieselbe Datei verwenden validator.js für Validierungen müssen wir nur eine neue Instanz der Methode ausführen BoostrapValidator mit der ID des neuen Formulars und dort gleich einschließen:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, Felder: {name: {validators: {notEmpty: {message: 'Vorname ist erforderlich'}}}, Nachname: {validators: {notEmpty: {message: 'Nachname ist erforderlich'}}}, E-Mail: {validators: {notEmpty: {message: ' Die E-Mail ist erforderlich und darf nicht leer sein '}, emailAddress: {message:' Die E-Mail ist ungültig '}}}, password: {validators: {notEmpty: {message:' Das Passwort ist erforderlich und darf nicht leer sein ' }, stringLength: {min: 8, message: 'Das Passwort muss mindestens 8 Zeichen enthalten'}}}, datetimepicker: {validators: {notEmpty: {message: 'Das Geburtsdatum ist erforderlich und darf nicht leer sein'} , date: {Format: 'YYYY-MM-DD', Nachricht: 'Das Geburtsdatum ist ungültig'}}}, *****: {validators: {notEmpty: {Nachricht: 'Das **** * ist erforderlich '}}}, Telefon: {Nachricht:' Das Telefon or is not valid ', validators: {notEmpty: {message:' Das Telefon ist erforderlich und darf nicht leer sein '}, regexp: {regexp: / [0-9] + $ /, message:' Das Telefon kann nur Zahlen enthalten'}}}, telefono_cel: {message: 'Das Telefon ist ungültig', validators: {regexp: {regexp: / [0-9] + $ /, Nachricht: 'Das Telefon kann nur Zahlen enthalten'} }},}}); Wir können sehen, dass die ersten beiden Validierungen dem vorherigen Beispiel ähneln, aber wenn wir das E-Mail-Feld finden, sehen wir, dass es die Validierung des erforderlichen Felds und zusätzlich mit dem Validator enthält E-Mail-Adresse Wir überprüfen, ob es sich um eine gültige E-Mail handelt. Sehen wir uns an, wie sich diese Validierung verhält:
Mit dem Datumsauswahl Wir haben keine Probleme bei der Eingabe von Daten, aber wenn wir dies 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 sein sollte JJJJ-MM-TT was gilt für:
Wir können sogar überprüfen, wie viele Zeichen das Passwort haben darf String-Länge und die Möglichkeit, Mindest:
Um die Leistungsfähigkeit dieses Plugins zu vervollständigen und zu demonstrieren, werden wir das Telefon validieren. Wir könnten den Ziffernvalidator verwenden, aber in diesem Fall verwenden wir etwas Komplexeres wie einen regulären Ausdruck und das Beste ist, dass wir bereits einen Validator dafür haben dass die regexp, Sehen wir uns an, wie es in unserem Formular funktioniert:
Nachdem wir bereits getestet 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 beenden wir dieses Tutorial, in dem wir gelernt haben, die Validierungen von Boostrap-Validator, ein leistungsstarkes Plugin, das keine Installation oder Konfiguration erfordert und es uns ermöglicht, unsere Formulare schnell und einfach mit ein paar einfachen Codezeilen zu validieren.
