Bei der Validierung wird sichergestellt, dass die Daten korrekt und vollständig sind.
In einem Beispiel aus der Praxis nehmen wir eine Site an, für die ein Registrierungsformular ausgefüllt werden muss, bevor Sie vollen Zugriff auf diese Site erhalten. Die Registrierungsseite enthält Eingabefelder für Benutzername, Passwort, E-Mail-ID usw.
Wenn der Benutzer das Formular sendet, erfolgt normalerweise zuerst eine Überprüfung, bevor die Details an den Server gesendet werden. Diese Validierung würde versuchen, so weit wie möglich sicherzustellen, dass die Details für die Eingabefelder richtig eingegeben werden.
Beispielsweise muss die E-Mail-ID immer das Format haben. Diese E-Mail-Adresse ist vor Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann. ;; Wenn jemand nur den Benutzernamen in die E-Mail-ID eingibt, sollte die Validierung im Idealfall fehlschlagen. Bei der Validierung werden daher diese grundlegenden Überprüfungen durchgeführt, bevor die Details zur weiteren Verarbeitung an den Server gesendet werden.
In diesem Tutorial lernen Sie:
- Formularvalidierung mit HTML5
- Formularüberprüfung mit $ schmutzig, $ gültig, $ ungültig, $ makellos
- Formularvalidierung mit AngularJS Auto Validate
- Benutzerfeedback mit Ladda-Tasten
Formularvalidierung mit HTML5
Bei der Formularvalidierung werden Informationen vorab validiert, die der Benutzer in ein Webformular eingegeben hat, bevor sie an den Server gesendet werden. Es ist immer besser, die Informationen auf der Client-Seite selbst zu validieren. Dies liegt daran, dass weniger Aufwand entsteht, wenn dem Benutzer das Formular erneut angezeigt werden muss, wenn die eingegebenen Informationen falsch sind.
Lassen Sie uns einen Blick darauf werfen, wie die Formularvalidierung in HTML5 durchgeführt werden kann.
In unserem Beispiel zeigen wir dem Benutzer ein einfaches Registrierungsformular, in das der Benutzer Details wie Benutzername, Passwort, E-Mail-ID und Alter eingeben muss.
Das Formular verfügt über Validierungskontrollen, um sicherzustellen, dass der Benutzer die Informationen ordnungsgemäß eingibt.
Event Registration Guru99 Global Event
Code Erläuterung:
- Für den Texteingabetyp verwenden wir das Attribut 'erforderlich'. Dies bedeutet, dass das Textfeld beim Senden des Formulars nicht leer sein darf und eine Art Text im Textfeld vorhanden sein sollte.
- Der nächste Eingabetyp ist das Passwort. Da der Eingabetyp als Kennwort markiert ist, wird er maskiert, wenn der Benutzer einen Text in das Feld eingibt.
- Da der Eingabetyp als E-Mail angegeben ist, muss der Text im Feld mit dem Muster übereinstimmen. Diese E-Mail-Adresse wird vor Spambots geschützt. JavaScript muss aktiviert werden, damit sie angezeigt werden kann. .
- Wenn der Eingabetyp als Zahl markiert ist und ein Benutzer versucht, ein Zeichen über die Tastatur oder das Alphabet einzugeben, wird es nicht in das Textfeld eingegeben.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Um die Formularüberprüfung in Aktion zu sehen, klicken Sie auf die Schaltfläche Senden, ohne Informationen auf dem Bildschirm einzugeben.
Nachdem Sie auf die Schaltfläche "Senden" geklickt haben, wird ein Popup mit einem Validierungsfehler angezeigt, dass das Feld ausgefüllt werden muss.
Die Validierung für das Steuerelement, das als erforderlich markiert wurde, führt dazu, dass die Fehlermeldung angezeigt wird, wenn der Benutzer keinen Wert in das Textfeld eingibt.
Wenn der Benutzer einen Wert in das Kennwortsteuerelement eingibt, wird das Symbol '*' angezeigt, mit dem die eingegebenen Zeichen maskiert werden.
Geben Sie dann eine falsche E-Mail-ID ein und klicken Sie auf die Schaltfläche "Senden". Nachdem Sie auf die Schaltfläche "Senden" geklickt haben, wird ein Popup mit einem Validierungsfehler angezeigt, für den das Feld das @ -Symbol benötigt.
Die Validierung für das Steuerelement, das als E-Mail-Steuerelement markiert wurde, führt dazu, dass die Fehlermeldung angezeigt wird, wenn der Benutzer keine richtige E-Mail-ID in das Textfeld eingibt.
Wenn Sie versuchen, Zeichen in das Alterstextsteuerelement einzugeben, werden diese nicht auf dem Bildschirm eingegeben. Das Steuerelement wird nur dann mit einem Wert gefüllt, wenn eine Zahl in das Steuerelement eingegeben wird.
Formularüberprüfung mit $ schmutzig, $ gültig, $ ungültig, $ makellos
AngularJS bietet seine zusätzlichen Eigenschaften zur Validierung. AngularJS bietet die folgenden Eigenschaften für Steuerelemente zu Validierungszwecken
- $ schmutzig - Der Benutzer hat mit dem Steuerelement interagiert
- $ valid - Der Feldinhalt ist gültig
- $ invalid - Der Feldinhalt ist ungültig
- $ pristine - Der Benutzer hat noch nicht mit dem Steuerelement interagiert
Nachfolgend sind die Schritte aufgeführt, die zur Durchführung der Winkelvalidierung ausgeführt werden müssen.
Schritt 1) Verwenden Sie die Eigenschaft no validate, wenn Sie das Formular deklarieren. Diese Eigenschaft teilt HTML5 mit, dass die Validierung von AngularJS durchgeführt wird.
Schritt 2) Stellen Sie sicher, dass für das Formular ein Name definiert ist. Der Grund dafür ist, dass bei der Durchführung der Winkelüberprüfung der Formularname verwendet wird.
Schritt 3) Stellen Sie sicher, dass für jedes Steuerelement auch ein Name definiert ist. Der Grund dafür ist, dass bei der Durchführung der Winkelvalidierung der Kontrollname verwendet wird.
Schritt 4) Verwenden Sie die Anweisung ng-show, um nach den Eigenschaften $ dirty, $ invalid und $ valid für die Steuerelemente zu suchen.
Schauen wir uns ein Beispiel an, das die oben genannten Schritte enthält.
In unserem Beispiel
Wir werden nur ein einfaches Textfeld haben, in das der Benutzer einen Themennamen in das Textfeld eingeben muss. Andernfalls wird ein Validierungsfehler ausgelöst und die Fehlermeldung wird dem Benutzer angezeigt.
Event Registration Guru99 Global Event
Code Erläuterung:
- Beachten Sie, dass wir dem Formular einen Namen gegeben haben, der "myForm" lautet. Dies ist erforderlich, wenn Sie auf die Steuerelemente im Formular für die AngularJS-Validierung zugreifen.
- Verwenden der Eigenschaft "novalidate", um sicherzustellen, dass AngularJS mit dem HTML-Formular die Validierung durchführen kann.
- Wir verwenden die Anweisung ng-show, um nach den Eigenschaften "$ schmutzig" und "$ ungültig" zu suchen. Dies bedeutet, dass, wenn das Textfeld geändert wurde, der Eigenschaftswert "$ schmutzig" wahr ist. In dem Fall, in dem der Textfeldwert null ist, wird die Eigenschaft "$ invalid" wahr. Wenn also beide Eigenschaften wahr sind, schlägt die Validierung für das Steuerelement fehl. Wenn also beide Werte wahr sind, wird auch die ng-Show wahr und die Bereichssteuerung mit den roten Farbzeichen wird angezeigt.
- In diesem Fall überprüfen wir die Eigenschaft "$ error", die ebenfalls als true ausgewertet wird, da wir für das Steuerelement erwähnt haben, dass für das Steuerelement ein Wert eingegeben werden soll. In einem solchen Fall, in dem keine Daten in das Textfeld eingegeben wurden, zeigt das Bereichssteuerelement den Text "Benutzername ist erforderlich" an.
- Wenn der Textfeldsteuerwert ungültig ist, möchten wir auch die Schaltfläche "Senden" deaktivieren, damit der Benutzer das Formular nicht senden kann. Wir verwenden die Eigenschaft "ng-disabled" für das Steuerelement, um dies basierend auf dem bedingten Wert der Eigenschaften "$ dirty" und "$ invalid" des Steuerelements zu tun.
- In der Steuerung setzen wir nur den Anfangswert des Textfeldwerts auf den Text 'AngularJS'. Dies geschieht nur, um einen Standardwert für das Textfeld festzulegen, wenn das Formular zum ersten Mal angezeigt wird. Es zeigt besser, wie die Validierung für das Textfeld erfolgt.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Wenn das Formular zum ersten Mal angezeigt wird, zeigt das Textfeld den Wert von "AngularJS" an und die Schaltfläche "Senden" ist aktiviert. Sobald Sie den Text aus dem Steuerelement entfernen, wird die Validierungsfehlermeldung aktiviert und die Schaltfläche Senden deaktiviert.
Der obige Screenshot zeigt zwei Dinge
- Die Schaltfläche "Senden" ist deaktiviert
- Das Textfeld Thema enthält keinen Themennamen. Daher wird die Fehlermeldung "Benutzername ist erforderlich" ausgelöst.
Formularvalidierung mit AngularJS Auto Validate
In AngularJS gibt es eine Möglichkeit, alle Steuerelemente in einem Formular automatisch zu validieren, ohne dass für die Validierung benutzerdefinierter Code geschrieben werden muss. Dies kann durch Einfügen eines benutzerdefinierten Moduls namens "jcs-AutoValidate" erfolgen.
Mit diesem Modul müssen Sie keinen speziellen Code eingeben, um die Validierung durchzuführen oder die Fehlermeldungen anzuzeigen. Dies alles wird durch den Code im JCS-AutoValidate erledigt.
Schauen wir uns ein einfaches Beispiel an, wie dies erreicht werden kann.
In diesem Beispiel ist
Wir werden nur ein einfaches Formular mit einem Textfeld-Steuerelement haben, das ein erforderliches Feld ist. Eine Fehlermeldung sollte angezeigt werden, wenn dieses Steuerelement nicht ausgefüllt ist.
Event Registration Guru99 Event
Code Erläuterung:
- Zuerst müssen wir das Skript "jcs-auto-validate.js" einfügen, das über alle Funktionen zur automatischen Validierung verfügt.
- Wir müssen sicherstellen, dass jedes Element, einschließlich des "div-Tags", in eine "Formulargruppen" -Klasse eingeordnet wird.
- Außerdem muss sichergestellt werden, dass jedes Element (bei dem es sich um ein HTML-Element wie Eingabesteuerung, Bereichssteuerung, Div-Steuerung usw. handelt) wie die Eingabesteuerung auch in der Formulargruppenklasse platziert wird.
- Fügen Sie das jcs-autovalidate in Ihr AngularJS JS-Modul ein.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Wenn Sie Ihren Code ausführen, wird das obige Formular standardmäßig gemäß dem HTML-Code angezeigt.
Wenn Sie versuchen, das Formular abzusenden, wird die Fehlermeldung "Dieses Feld ist erforderlich" angezeigt. All dies erfolgt über die Option JCS-AutoValidate.
Benutzerfeedbacks mit Ladda-Tasten
Die "ladda" -Schaltflächen sind ein spezielles Framework für Schaltflächen über JavaScript, um Schaltflächen beim Drücken einen visuellen Effekt zu verleihen.
Wenn also eine Schaltfläche das Attribut "ladda" erhält und gedrückt wird, wird ein Spin-Effekt angezeigt. Außerdem stehen für die Schaltfläche verschiedene Datenstile zur Verfügung, um zusätzliche visuelle Effekte bereitzustellen.
Schauen wir uns ein Beispiel an, wie Sie "ladda" -Schaltflächen in Aktion sehen. Wir werden nur ein einfaches Formular sehen, das einen Senden-Button hat. Wenn die Taste gedrückt wird, wird ein Spin-Effekt auf der Taste angezeigt.
Event Registration Guru99 Event
Code Erläuterung:
- Wir verwenden die Direktive "ng-submit", um eine Funktion namens "submit" aufzurufen. Diese Funktion wird verwendet, um das ladda-Attribut der Senden-Schaltfläche zu ändern.
- Das ladda-Attribut ist ein spezielles Attribut des ladda-Frameworks. Es ist dieses Attribut, das der Steuerung den Spin-Effekt hinzufügt. Wir setzen den Wert des ladda-Attributs auf die übermittelnde Variable.
- Die Eigenschaft im Datenstil ist wiederum ein zusätzliches Attribut des ladda-Frameworks, das der Schaltfläche "Senden" lediglich einen anderen visuellen Effekt hinzufügt.
- Das 'AngularJS-ladda'-Modul muss der AngularJS.JS-Anwendung hinzugefügt werden, damit das ladda-Framework funktioniert.
- Zunächst definieren wir den Wert einer Variablen namens "Submission" und setzen ihn auf "false". Dieser Wert wird für das ladda-Attribut der Schaltfläche "Senden" festgelegt. Wenn Sie dies zunächst auf false setzen, möchten wir, dass die Schaltfläche "Senden" noch keinen Ladda-Effekt hat.
- Wir deklarieren eine Funktion, die aufgerufen wird, wenn die Senden-Taste gedrückt wird. In dieser Funktion setzen wir das 'Senden' auf true. Dadurch wird der Ladda-Effekt auf die Schaltfläche "Senden" angewendet.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Wenn das Formular zum ersten Mal angezeigt wird, wird die Schaltfläche "Senden" in seiner einfachen Form angezeigt.
Wenn die Senden-Taste gedrückt wird, wird die Sendevariable in der Steuerung auf true gesetzt. Dieser Wert wird an das Attribut "ladda" der Schaltfläche "Senden" übergeben, wodurch der Spin-Effekt der Schaltfläche verursacht wird.
Zusammenfassung
- Die Validierung der Textfeld-HTML-Steuerelemente kann mithilfe des Attributs 'erforderlich' erfolgen.
- In HTML5 wurden neue Steuerelemente wie Kennwort, E-Mail und Nummer hinzugefügt, die ihre eigenen Überprüfungen bereitstellen.
- Die Formularvalidierung in AngularJS wird durch Betrachten der $ schmutzigen, $ gültigen, $ ungültigen und $ ursprünglichen Werte eines Formularsteuerelements erledigt.
- Die automatische Validierung in AngularJS-Anwendungen kann auch mithilfe des JCS-Moduls für die automatische Validierung erreicht werden.
- Ladda-Schaltflächen können zu einer Angular.js-Anwendung hinzugefügt werden, um dem Benutzer beim Drücken der Schaltfläche ein verbessertes visuelles Gefühl zu verleihen.