Phenquestions
Die Formularvalidierung ist der grundlegende und wichtigste Teil des Webentwicklungsprozesses. Normalerweise erfolgt die Formularvalidierung serverseitig. Die Formularvalidierung hilft dabei, dem Benutzer Fehlermeldungen anzuzeigen, wenn unnötige oder falsche Daten angegeben werden oder ein erforderliches Feld leer gelassen wird. Wenn der Server einen Fehler findet, wirft er diesen Fehler zurück; dann zeigen wir dem Benutzer die Fehlermeldung. Aber wir können Javascript im Frontend verwenden, um die Formulardaten zu validieren und Fehler sofort anzuzeigen. In diesem Artikel lernen wir die grundlegende Formularvalidierung in Javascript. Kommen wir also direkt zu den Beispielen und sehen, wie wir das in Javascript machen können.
Beispiele
Wir gehen zunächst von einem Formular mit dem Namen „testForm“ aus, in dem wir ein Eingabefeld mit der Bezeichnung „Benutzername“ haben und einen Eingabetyp in unserer HTML-Datei absenden. Im form-Tag haben wir ein onsubmit-Ereignis erstellt, in dem wir eine Schließung vornehmen und eine Funktion zurückgeben ValidationFunc().
In die Skriptdatei schreiben wir die Funktionsdefinition von validierFunc(), die jedes Mal ausgeführt wird, wenn der Benutzer auf die Schaltfläche zum Senden klickt. In dieser Funktion validieren wir das Eingabefeld für den Benutzernamen. Wir nehmen an, dass wir überprüfen möchten, ob das Benutzernamensfeld leer ist oder nicht, wenn der Benutzer auf die Schaltfläche zum Senden klickt.
Um das Benutzernamenfeld zu validieren. Wir weisen dem Dokument zunächst eine Variable zu.testForm, nur um dem Code einen sauberen und verständlichen Look zu geben. Dann schreiben wir in der Funktionsdefinition den Code für die Validierung. Wir werden eine if-Anweisung schreiben, um das leere Formularfeld zu überprüfen. Wenn das Feld für den Benutzernamen leer ist, zeigen wir ein Warnfeld an, um den Fehler anzuzeigen, konzentrieren uns wieder auf das Feld für den Benutzernamen und geben false zurück, damit das Formular nicht gesendet wird. Andernfalls, wenn es die Prüfung besteht und die Daten validiert werden, geben wir true an die Funktion zurück.
var theForm = Dokument.testForm;// Formularvalidierungscode
FunktionsvalidierungFunc()
wenn (dieForm.Name.Wert == "")
alert( "Name ist leer");
die Form.Name.Fokus();
falsch zurückgeben;
zurück (wahr);
Nachdem du diesen ganzen Code geschrieben hast. Wenn wir den Code ausführen und auf die Schaltfläche zum Senden klicken, ohne etwas in das Formularfeld zu schreiben.
Wie Sie im unten angehängten Screenshot sehen können, wird ein Fehler in der Benachrichtigungsbox ausgegeben.
Dies ist ein sehr einfaches, aber gutes Beispiel, um mit der Implementierung der Formularvalidierung zu beginnen. Für weitere Implementierungen, wie mehrere Formularvalidierungen oder Sie möchten auch die Zeichenlänge überprüfen.
Dazu nehmen wir zunächst zwei Formularfelder im Formular-Tag mit der Bezeichnung „E-Mail“ und „Passwort“ in unserer HTML-Datei an.
Für die Validierung in Javascript werden wir erneut eine if-Anweisung zur Validierung der E-Mail- und Passwort-Formularfelder in die Funktionsdefinition der Skriptdatei einfügen. Angenommen, wir möchten mehrere Validierungen auf das E-Mail-Feld anwenden, so dass das Feld nicht leer sein sollte und seine Länge nicht weniger als 10 Zeichen betragen sollte. Wir können also ODER "||" verwenden. in der if-Anweisung. Wenn einer dieser Fehler auftritt, wird ein Warnfeld mit der Fehlermeldung angezeigt, die wir anzeigen möchten, konzentrieren Sie sich auf das E-Mail-Formularfeld und geben Sie false an die Funktion zurück. Wenn wir die Zeichenlängenprüfung auf das Passwortfeld anwenden möchten, können wir dies ebenfalls tun.
var theForm = Dokument.testForm;// Formularvalidierungscode
FunktionsvalidierungFunc()
wenn (dieForm.Name.Wert == "")
alert( "Name ist leer");
die Form.Name.Fokus();
falsch zurückgeben;
wenn (dieForm.Email.Wert == "" || die Form.Email.Wert.Länge < 10)
alert( "E-Mail ist unangemessen");
die Form.Email.Fokus();
falsch zurückgeben;
wenn (dieForm.Passwort.Wert.Länge < 6)
alert( "Passwort muss 6 Zeichen lang sein");
die Form.Passwort.Fokus();
falsch zurückgeben;
zurück (wahr);
Nachdem Sie all diesen Code geschrieben haben, laden Sie die Seite neu, um den aktualisierten Code zu erhalten. Jetzt lassen wir entweder ein leeres E-Mail-Feld oder schreiben eine E-Mail mit weniger als 10 Zeichen. In beiden Fällen wird der Fehler „E-Mail ist unangemessen“ angezeigt.
So können wir die grundlegende Formularvalidierung in JavaScript anwenden. Wir können die Datenvalidierung auch clientseitig mit Regex oder durch das Schreiben unserer eigenen benutzerdefinierten Funktion anwenden. Angenommen, wir möchten die Datenvalidierung auf das E-Mail-Feld anwenden. Die Regex würde so aussehen, um eine E-Mail zu validieren.
wenn (/^[a-zA-Z0-9.!#$%&'*+/=?^_'|~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(dieForm.Email.Wert))
alert( "E-Mail ist unangemessen");
die Form.Email.Fokus() ;
falsch zurückgeben;
Dies war nur eine grundlegende Demonstration der Datenvalidierung mit Regex. Aber der Himmel steht dir zum Fliegen offen.
Fazit
Dieser Artikel behandelt die grundlegende Formularvalidierung in Javascript. Wir haben auch versucht, einen Einblick in die Datenvalidierung mit Regex zu bekommen. Wenn Sie mehr über Regex erfahren möchten, haben wir einen speziellen Artikel zu Regex auf linuxhint.com. Um die Konzepte von Javascript und weitere nützliche Inhalte wie diesen zu lernen und zu verstehen, besuchen Sie weiterhin linuxhint.com. Vielen Dank!
