Wie implementiere ich die Formularvalidierung in Angular JS?

Validierung ist eine Methode zu authentifizieren der Benutzer. Es wird in allen Webtechnologien wie verwendet und . Heute liegt unser Fokus jedoch auf der Validierung in Angular JS in der folgenden Reihenfolge:

• Was ist Formularvalidierung?
• Formularvalidierung in Angular JS
• Schritte zur Formularvalidierung
• Code

Was ist Formularvalidierung?

Die Formularvalidierung ist eine Technik, mit der wir das HTML-Formular validieren können. Nehmen wir ein einfaches Beispiel, um anzunehmen, dass ein Benutzer ein HTML-Formular hat und dieses HTML-Formular unterschiedliche Felder hat. Dieses Feld wird vom Formularvalidator validiert, wenn wir das Formular validieren möchten, das wir nur benötigen, um den Wert des bestimmten Felds mit dem Validator-Ausdruck zu überprüfen .

Wenn der reguläre Ausdruck und der Feldwert gleich sind, können wir sagen, dass unser Formular validiert ist. Im HTML-Formular gibt es verschiedene Arten von Überprüfungen wie E-Mail, Erforderlich, Min, Max, Passwort usw.

Formularvalidierung in Angular JS

Lassen Sie uns darüber sprechen, wie wir ein Formular in eckigem JS validieren können. Angular JS bietet verschiedene Arten von Formularvalidierungseigenschaften, mit denen wir das Formular validieren oder die Daten aus dem Formular abrufen können.

• $ gültig : Diese Eigenschaft gibt an, ob das Feld gültig ist oder nicht, indem die entsprechende Regel darauf angewendet wird.

• $ ungültig : Wie der Name schon sagt, ist dieses Feld ungültig oder basiert nicht auf einer entsprechenden Regel.

• $ makellos : Es wird true zurückgegeben, wenn das Formulareingabefeld nicht verwendet wird.

  
  
  

• $ schmutzig : Es wird true zurückgegeben, wenn das Formulareingabefeld verwendet wird.

• $ berührt : BooleanTrue, wenn die Eingabe unscharf ist.

So greifen Sie auf das Formular zu: .

So greifen Sie auf eine Eingabe zu: ..

Lassen Sie uns nun die Formularvalidierung in eckigem JS anhand eines Beispiels erläutern. Zunächst erstellen wir zwei Dateien, eine app.js und eine index.html. Unsere Datei index.htm enthält ein einfaches HTML-Formular mit der Winkelüberprüfung, und unsere Datei app.js enthält den Backend-Code für die Formularüberprüfung auf der Seite index.html.

Dasindex.htmlSeiteninhalt bilden mitnovalidateEigentum und was bedeutet das genau?

Die Eigenschaft novalidate im Formular-Tag teilt dem HTML mit, dass wir unsere benutzerdefinierte Formularüberprüfung verwenden können. Wenn wir die Novalidate-Eigenschaft nicht angeben, wird das HTML-Formular mithilfe der HTML5-Standard-Formularvalidierungseigenschaften validiert.

Schritte zur Formularvalidierung

In unserem Formular haben wir 6 Felder in unserem Formular erstellt: Vorname, Nachname, E-Mail, Telefon, Passwort und Nachricht.

1. Zuerst fügen wir den erforderlichen Feldvalidator hinzu. Dieser Validator teilt den Benutzern mit, dass ein bestimmtes Feld erforderlich ist.

2. Als nächstes wird das E-Mail-Feld angezeigt. Wenn ein Benutzer keine gültige E-Mail-Adresse angibt, gibt unser E-Mail-Validierer einen E-Mail-Validierungsfehler aus.

3. Wir legen die minimale und maximale Länge in unserer Passwortüberprüfung fest. Die minimale Länge beträgt 5 und die maximale Länge 8, damit der Benutzer ein gültiges Passwort zwischen 5 und 8 Zeichen eingeben kann.

4. Schließlich stellen wir das Telefon und die erforderlichen Nachrichtenfelder ein und wenden speziell die Nummernüberprüfung auf das eingereichte Telefon an.

Code für die Formularvalidierung in Angular JS

index.html

Beispiel für einen Winkelbereich Vorname 
 
Diese Datei ist erforderlich
Familienname, Nachname 
 
Diese Datei ist erforderlich
Email 
 
Diese Datei ist erforderlich
 
Keine gültige E-Mail
Telefon 
 
Diese Datei ist erforderlich
 
Dies ist kein gültiges Telefon
Passwort 
 
Diese Datei ist erforderlich
Lesen und Schreiben von Excel-Dateien in Java
 
Passwort zwischen 5 und 8 Zeichen
Botschaft 
 
Diese Datei ist erforderlich
einreichen

app.js.

var app = angle.module ('ngValidApp', []) app.controller ('ngValidController', Funktion ($ scope) {})

Lassen Sie uns über eine Validierungsanweisung sprechen, die im Formular verwendet wird:

• ng-erforderlich :: Zur Bereitstellung des erforderlichen Feldes
• ng-show :: So zeigen Sie die Fehlermeldung basierend auf der Bedingung an (überprüfen Sie die Validierungseigenschaften)
• von minlength :: Zur Bereitstellung einer Mindestlänge
• ng-maxlength :: Zur Bereitstellung der maximalen Länge
• of-pattern :: Um einem bestimmten Muster zu entsprechen
• ng-Modell :: Bindet das Feld mit Validierungseigenschaften wie $ error, $ valid usw.

Damit sind wir am Ende dieses Artikels zur Validierung in Angular JS angelangt. Ich hoffe, Sie haben ein Verständnis für die verschiedenen Aspekte der Formularvalidierung in Angular JS.

Wenn Sie mehr über Angular Framework erfahren möchten, lesen Sie unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Dieses Training wird Ihnen helfen, Angular gründlich zu verstehen und das Thema zu beherrschen.

Hast du eine Frage an uns? Bitte erwähnen Sie es in den Kommentaren dieses Artikels und wir werden uns bei Ihnen melden.