So validieren Sie das E-Mail-Formular auf clientseitig in JavaScript
Auf der Kundenseite, E -Mails Formulare werden validiert, um ungültige Daten zu erfassen, damit der Benutzer sie sofort korrigieren kann. In anderen Fällen wird, wenn ungültige Daten an den Server übermittelt werden, abgelehnt, und der entsprechende Server sendet sie an den Client zurück.
Diese Beschreibung wird diskutieren validieren E -Mail -FormularS An die kundenseitige In JavaScript. So lass uns anfangen!
So validieren Sie das E-Mail-Formular auf clientseitig in JavaScript
Eine E -Mail umfasst eine “Saite,”Das wird als Teilmenge von ASCII -Zeichen dargestellt, die durch Verwendung der“ in zwei Teile getrennt ist@Symbol. Es kann als "geschrieben werden"userInfo@domain", Wo "BenutzerinformationIst die privaten Informationen des Benutzers. Die Länge der “BenutzerinformationTeil sollte nicht mehr als sein 64 Charaktere, während die Domain Name kann haben 253 Figuren.
Der "BenutzerinformationTeil kann die untergegebenen ASCII-Zeichen enthalten:
- Zahlen von 0 Zu 9.
- Großbuchstaben (A-z) und Kleinbuchstaben (a-z) Englische Buchstaben.
- Sonderzeichen wie z ~ _ ' / ? - + = ^ | $ * ' ! & # %
- Sie können auch einen Periodencharakter hinzufügen “.”, Aber es sollte nicht der erste und letzte Charakter des" userInfo "-Teils sein und es nicht nach dem anderen wiederholen.
Der in der E -Mail -Adresse angegebene Domain -Name wie Org, Info, Net, COM, USA kann Ziffern, Briefe, Bindestriche und Vollstation enthalten.
Schauen Sie sich einige Beispiele für gültige und ungültige E-Mail-IDs an:
Beispiele für das gültige E -Mail -Format
Beispiele für ungültiges E -Mail -Format
- Galaxis.com (“@”Charakter wird nicht hinzugefügt)
- [email protected] (Top -Level -Domain kann nicht mit “beginnen“.”))
- [email protected] (".A”Ist keine gültige Domäne der obersten Ebene)
- [email protected] (starten Sie keine E -Mail -ID mit “.”Charakter)
- @beliebig.Domain.Netz ("Benutzerinformation"Teil fehlt vor dem"@”Charakter)
Jetzt werden wir ein praktisches Beispiel im Zusammenhang mit der E -Mail -Validierungsformular in JavaScript demonstrieren.
Beispiel: Validieren Sie das E -Mail -Formular auf der Client -Seite in JavaScript
Zunächst werden wir ein Formular auf unserer Kundenseite mit einer "erstellen"Eingang"Feld für die Eingabe von E -Mail -ID und eine"EinreichenSchaltfläche zum Überprüfen des E -Mail -Formats:
Bitte geben Sie Ihre E -Mail -Adresse ein
Regelmäßiger Ausdruck für die Validierung des E -Mail -Formulars auf der Clientseite in JavaScript
In JavaScript, Reguläre Ausdrücke sind eine der nützlichsten Methoden zur Validierung des E -Mail -Formats. Sie stellen ein Charakter des Musters dar, das mit der Benutzereingabe verglichen wird.
In unserer JavaScript -Datei fügen wir den folgenden regulären Ausdruck hinzu, um die vom Benutzer eingegebene E -Mail -ID zu validieren:
MailFormat = /^\ W+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;Der oben gegebene reguläre Ausdruck ermöglicht es Ihnen, Großbuchstaben (A-Z) und Kleinbuchstaben (A-Z), Ziffern (0-9), Periode hinzuzufügen "hinzuzufügen".Und Sonderzeichen wie ~ _ ' / ? - + = ^ | $ * ' ! & # % in der E -Mail -ID.
Wir werden eine "erstellen"E-Mail validieren()"Funktion in JavaScript, die dauern wird"EingabetextAls Argumentation. Danach werden wir den genannten regulären Ausdruck in der “speichern“Mailformat”. Die hinzugefügte “Mailformat”Wird dann mit der Benutzereingabe verglichen. Wenn die eingegebene E -Mail -ID über ein gültiges Format verfügt, wird auf dem Bildschirm mit der Zeichenfolge eine Warnung angezeigtSie haben eine gültige E -Mail -Adresse eingegeben!”. Andernfalls werden Sie wissen, dass die E -Mail -ID ungültig ist:
Funktion valateMail (inputText)var mailformat = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;
if (InputText.Wert.Match (MailFormat))
Warnung ("Sie haben eine gültige E -Mail -Adresse eingegeben!");
dokumentieren.Form 1.Text 1.Fokus();
zurückkehren;
anders
alert ("ungültige E -Mail -Adresse");
dokumentieren.Form 1.Text 1.Fokus();
falsch zurückgeben;
Wir haben auch den HTML -Elementstil festgelegt, um ihr Erscheinungsbild im E -Mail -Validierungsformular zu verbessern:
Jetzt werden wir unsere öffnen ““Index.HTML ” Datei mit Hilfe von VS -Code “Live -Server" Verlängerung:
Hier kommt das E -Mail -Validierungsformular mit einem Eingabefeld und einer Schaltfläche Senden:
Zum ersten Mal geben wir eine gültige E -Mail -ID ein und:
Nach dem Klicken auf “Einreichen”Schaltfläche" Schaltfläche "Es wird auf unserer Webseite ein Alarmfeld angezeigt, wonach die eingegebene E -Mail -Adresse gültig ist:
Um nach einer ungültigen E -Mail zu überprüfen, schreiben wir eine E -Mail mit einem ungültigen Format aus und klicken dann auf die Schaltfläche Senden:
Sie können sehen, dass unser E -Mail -Validierungsformular perfekt zur Validierung der E -Mail -ID gemäß dem angegebenen Format funktioniert.
Abschluss
Mit JavaScript können Sie E-Mail-Formulare auf der Client-Seite validieren. Das erstellte E -Mail -Validierungsformular basiert auf den Benutzeranforderungen, z. B. auf regelmäßige Ausdrücke, das Akzeptieren von Zeichen und Ziffern in der E -Mail -ID oder nur bestimmte Domänen zuzulassen. Die Validierung von E -Mail -Formularen hilft auch beim Senden korrekter und wertvoller Informationen an den Server. In diesem Artikel wurde das Verfahren zur Validierung von E-Mail-Formularen auf der Client-Seite in JavaScript mithilfe geeigneter Beispiele erläutert.