JavaScript -Formularvalidierung

Formularvalidierung ist der grundlegende und wichtigste Teil des Webentwicklungsprozesses. Normalerweise erfolgt auf der serverseitigen Form eine Formularvalidierung. Formularvalidierung hilft bei der Anzeige von Fehlermeldungen an den Benutzer, wenn unnötige oder falsche Daten bereitgestellt werden oder ein erforderliches Feld leer bleibt. Wenn der Server einen Fehler findet, wirft er diesen Fehler zurück. Dann zeigen wir die Fehlermeldung an den Benutzer an. Wir können jedoch JavaScript im Front-End verwenden, um die Formulardaten zu validieren und Fehler sofort anzuzeigen. In diesem Artikel lernen wir die grundlegende Formvalidierung in JavaScript kennen. Kommen wir also direkt zu den Beispielen und sehen, wie wir das in JavaScript tun können.

Beispiele

Erstens nehmen wir ein Formular mit dem Namen „Testform“ an, in dem wir ein Eingabefeld mit dem Beschriftung „Benutzername“ und ein Eingabetyp in unserer HTML -Datei einreichen. Im Formular Tag haben wir ein Onsubmit -Ereignis erstellt, bei dem wir schließen und eine Funktion zurückgeben validateFunc ().

Nutzername

In der Skriptdatei schreiben wir die Funktionsdefinition von ValidateFunc (), die jedes Mal ausgeführt wird, wenn der Benutzer die Schaltfläche Senden aufnimmt. In dieser Funktion werden wir das Feld Benutzername validieren. Wir gehen davon aus.

Um das Feld Benutzername zu validieren. Wir weisen dem Dokument zunächst eine Variable zu.Testform, nur um dem Code einen sauberen und verständlichen Blick zu verleihen. In der Funktionsdefinition schreiben wir dann den Code zur Validierung. Wir schreiben eine If -Anweisung, um das Feld leerer Formular zu überprüfen. Wenn das Feld des Benutzernamens leer ist, werden wir ein Warnbox zeigen, um den Fehler anzuzeigen, konzentrieren Sie sich erneut auf das Feld Benutzername, und kehren Sie falsch zurück, damit das Formular nicht übermittelt wird. Andernfalls werden wir, wenn es die Überprüfung übergeht und die Daten validiert werden, an die Funktion zurückgegeben.

var theform = document.Testform;
// Formularvalidierungscode
Funktion validationFunc ()
if (theform.Name.value == "")
alarm ("Name ist leer");
die Form.Name.Fokus();
falsch zurückgeben;

return (wahr);

Nach dem Schreiben all dieser Code. Wenn wir den Code ausführen und auf die Schaltfläche Senden klicken, ohne etwas im Formularformfeld zu schreiben.

Wie Sie im unten angeschlossenen Screenshot beobachten können.

Dies ist ein sehr grundlegendes und dennoch gutes Beispiel für die Implementierung der Formularvalidierung. Zur weiteren Implementierung wie mehrere Formularvalidierungen oder Sie möchten auch die Charakterlänge überprüfen.

Zu diesem Zweck nehmen wir zunächst zwei Formularfelder in der Formular -Tag mit der Beschriftung von „E -Mail“ und „Passwort“ in unserer HTML -Datei an.

Nutzername


Email


Passwort

Zur Validierung in JavaScript geben wir erneut eine IF -Anweisung zur Validierung der Felder für E -Mail- und Kennwortformular in der Funktionsdefinition der Skriptdatei ein. Angenommen, wir möchten mehrere Validierungen im Feld E -Mail anwenden, wie das Feld nicht leer sein sollte, und seine Länge sollte nicht weniger als 10 Zeichen betragen. Wir können also verwenden oder "||" In der IF -Aussage. Wenn einer dieser Fehler auftritt, wird ein Alarmfeld mit der Fehlermeldung angezeigt, die wir anzeigen möchten, konzentrieren Sie sich auf das Feld "E -Mail -Formular. In ähnlicher Weise können wir dies tun, wenn wir die Charakterlängenprüfung auf das Kennwortfeld anwenden möchten.

var theform = document.Testform;
// Formularvalidierungscode
Funktion validationFunc ()
if (theform.Name.value == "")
alarm ("Name ist leer");
die Form.Name.Fokus();
falsch zurückgeben;

if (theform.Email.Wert == "" || die Form.Email.Wert.Länge < 10)
alarm ("E -Mail ist unangemessen");
die Form.Email.Fokus();
falsch zurückgeben;

if (theform.Passwort.Wert.Länge < 6)
alarm ("Passwort muss 6 Zeichen lang sein");
die Form.Passwort.Fokus();
falsch zurückgeben;

return (wahr);

Laden Sie nach dem Schreiben all dieser Code die Seite neu, um den Code aktualisiert zu haben. Jetzt hinterlassen wir entweder ein leeres E -Mail -Feld oder schreiben eine E -Mail mit weniger als 10 Zeichen. In beiden Fällen wird ein Fehler „E -Mail ist unangemessen“ angezeigt.

So können wir also eine grundlegende Formularvalidierung in JavaScript anwenden. Wir können auch die Datenvalidierung auf der Client-Seite mit Regex oder durch das Schreiben unserer eigenen benutzerdefinierten Funktion anwenden. Angenommen, wir möchten die Datenvalidierung im Feld E -Mail anwenden. Der Regex wäre so wie dies zur Validierung einer E -Mail.

if (/^[a-za-z0-9.!#$%& '*+/=?^_ '| ~-]+@[a-za-z0-9-]+(?: \.[a-za-z0-9-]+)*$/.
Test (theform.Email.Wert))
alarm ("E -Mail ist unangemessen");
die Form.Email.Fokus() ;
falsch zurückgeben;

Dies war nur eine grundlegende Demonstration der Datenvalidierung mit Regex. Aber der Himmel ist offen für Sie zu fliegen.

Abschluss

Dieser Artikel deckt die grundlegende Formularvalidierung in JavaScript ab. Wir haben auch versucht und mit Regex einen Einblick in die Datenvalidierung einschlagen. Wenn Sie mehr über Regex erfahren möchten, haben wir einen speziellen Artikel zu Regex unter LinuxHint.com. Um die Konzepte von JavaScript und nützlichere Inhalte wie diesen zu lernen und zu verstehen, besuchen Sie weiterhin LinuxHint.com. Danke!