Benutzer können mit Hilfe von JavaScript und regulären Ausdrücken problemlos die Formularvalidierung verwalten. Formulare sind entscheidend für die ordnungsgemäße Arbeit auf einer Website, und die Verwaltung ungültiger Eingaben in den Formulierungsfeldern ist der Auftrag des Programmierers. Dieser Artikel zeigt Ihnen, wie Sie ein Formular erstellen und wie Sie mit Hilfe von JavaScript unterschiedliche Validierungsprüfungen auf verschiedenen Formulierungsfeldern durchführen können.

Schritt 1: Einrichten des HTML -Dokuments

Erstellen Sie ein neues HTML -Dokument und geben Sie die folgenden Zeilen darin ein, um ein Formular zu erstellen:

Dies ist ein Beispiel für die Formularvalidierung

Geben Sie Ihren Vornamen ein:

Geben Sie Ihre E -Mail -Adresse ein

Geben Sie Ihren Kontakt ohne# ein

Einreichen!

In den obigen Zeilen:

• A Das Tag wird verwendet, um ein Formular mit dem Namen zu erstellen, der auf festgelegt ist Gültigkeit und die Methode ist auf eingestellt "Post". Außerdem ist die Onsubmit -Eigenschaft auf "Return formSubmit ()" Dies führt diese Methode bei der Einreichung aus und legt das Formular nur ein, wenn diese Methode true zurückgibt.
• Danach einfach benutzen

  Tags, um den Benutzer aufzufordern und Um die Eingabe vom Benutzer zu nehmen. Denken Sie daran, dass jedes Eingabetag einen eindeutigen Namen hat.

• Erstellen Sie am Ende des Formulars eine Schaltfläche mit dem Typ einstellen "einreichen".

Wenn das HTML -Dokument in einem Webbrowser geladen wird, wird Folgendes angezeigt:

Die Webseite fragt nach dem Vornamen, der E -Mail -Adresse und der Kontaktnummer des Benutzers des Benutzers.

Schritt 2: Einrichten der JavaScript -Datei

Erstellen Sie in JavaScript mit den folgenden Zeilen die Funktionsformsubmit ():

Funktion formsubmit ()
// Alle nächsten Zeilen werden in den Körper dieser Funktion einbezogen

Erstellen Sie danach drei Variablen und speichern Sie die Werte aus den drei Feldern in ihnen mit den folgenden Zeilen:

var FirstName = Dokument.Formen.Gültigkeit.Name.Wert;
var conactNumber = document.Formen.Gültigkeit.Email.Wert;
var Emailadr = Dokument.Formen.Gültigkeit.Tele.Wert;

In den obigen Zeilen die "dokumentieren" Objekt wurde verwendet, um das zu bekommen "Formen" Attribut, das mit dem Namen des Formulars weiter verwendet wurde Gültigkeit So greifen Sie mit ihren Namen auf die Eingabe -Tags zu.

Definieren Sie danach die regulären Ausdrücke zur Überprüfung der Gültigkeit jedes Feldes mit den folgenden Zeilen:

var EmailRegex = /^\ W+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

In den obigen Zeilen:

• Emailregex Überprüfen Sie eine gültige E -Mail -Adresse mit @ einschließlich und erlaubt sogar einen Punkt “.Und ein Bindestrich
• teleregex Überprüft nur numerische Zeichen mit maximaler Länge des Eingangs auf 10
• Nameregex Überprüft nach Sonderzeichen oder Zahlen im Feld Name

Vergleichen Sie danach die drei regulären Ausdrücke mit ihren jeweiligen Textfeldwerten mit Hilfe von IF -Anweisungen, und wenn ein Feld ungültig ist, kehren Sie einfach zurück und alarmieren Sie den Benutzer für all diese folgenden Zeilen:

if (FirstName == "" || nameregex.test (FirstName))
Fenster.alert ("ungültiger Vorname");
falsch zurückgeben;

if (E -MailAdr == "" || !Emailregex.test (Emailadr))
Fenster.Warnung ("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
falsch zurückgeben;

if (conactNumber == "" || !teleregex.test (conactNumber))
alert ("ungültige Telefonnummer");
falsch zurückgeben;

Danach fordern Sie den Benutzer dazu auf, dass die Eingänge gültig waren und den Wert wie WAHR:

ALERT ("Formular mit korrekten Informationen übermittelt");
zurückkehren;

Der vollständige JavaScript -Code lautet wie:

FunktionsformSubmit ()
var FirstName = Dokument.Formen.Gültigkeit.Name.Wert;
var conactNumber = document.Formen.Gültigkeit.Email.Wert;
var Emailadr = Dokument.Formen.Gültigkeit.Tele.Wert;
var EmailRegex = /^\ W+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (FirstName == "" || nameregex.test (FirstName))
Fenster.alert ("ungültiger Vorname");
falsch zurückgeben;

if (E -MailAdr == "" || !Emailregex.test (Emailadr))
Fenster.Warnung ("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
falsch zurückgeben;

if (conactNumber == "" || !teleregex.test (conactNumber))
alert ("ungültige Telefonnummer");
falsch zurückgeben;

ALERT ("Formular mit korrekten Informationen übermittelt");
returnTrue;

Schritt 3: Testen der Validierung des Formulars

Führen Sie die Arbeit der Formularvalidierung aus, indem Sie das HTML -Dokument ausführen und Daten in die Eingabebereich eingeben. Geben Sie einen ungültigen Namen mit Sonderzeichen oder Zahlen darin an

Die Webseite veranlasste den Benutzer, dass der Name ungültig war.

Versuchen Sie es erneut mit dem richtigen Namen und einer falschen E -Mail -Adresse:

Der Benutzer wurde darauf hingewiesen, dass die E -Mail -Adresse nicht gültig ist.

Versuchen Sie danach einen gültigen Namen und eine gültige E -Mail -Adresse, jedoch mit einer ungültigen Kontaktnummer wie:

Die Webseite forderte den Benutzer auf, dass die Kontaktnummer nicht gültig ist.

Geben Sie für den endgültigen Test alle richtigen Informationen wie:

Mit allen bereitgestellten Informationen ist die Formularvalidierung erfolgreich und die Webanwendung kann sich weiterentwickeln.

Abschluss

Formularvalidierung kann in einem HTML -Formular mit JavaScript, regulären Ausdrücken und einem wenig Logikgebäude implementiert werden. Regelmäßige Ausdrücke können den richtigen akzeptierten Eingang für ein Feld definieren. Danach kann der reguläre Ausdruck mithilfe der Test () -Methode des jeweiligen Eingabefeldes mit dem Wert des jeweiligen Eingabefeldes übereinstimmen. Dies gilt auch für andere Arten von Eingabefeldern.