Wie führt man eine E-Mail-Validierung in JavaScript durch? [Mit Beispielen]

Veröffentlicht: 2021-02-23

JavaScript ist eine Programmiersprache zum Erstellen von Anwendungen. Es ist viel schneller als andere Sprachen, weil es so leicht und einfach zu bedienen ist. Es wird zum Erstellen gut gestalteter Anwendungen verwendet.

Die E- Mail-Validierung in JavaScript ist wichtig für die Benutzererfahrung beim Erstellen von Webanwendungen. Die Validierung hilft dabei, gültige Informationen vom Client der Webanwendung an einen Server zu übergeben.

Inhaltsverzeichnis

Was ist Validierung?

Validierung bezieht sich auf den Prozess der Überprüfung der Werte, die der Benutzer eingibt. Es spielt eine entscheidende Rolle bei der Erstellung von Anwendungen und verbessert die Benutzererfahrung. Viele Felder wie Handynummern, E-Mails, Daten und Passwörter werden durch diesen Prozess validiert.

JavaScript macht den Validierungsprozess aufgrund seiner schnelleren Datenverarbeitung schneller als andere serverseitige Validierungen. Schauen wir uns nun die Implementierung der E- Mail-Validierung in JavaScript an .

E-Mail-Validierung in JavaScript

Die E-Mail-Validierung ist einer der wichtigsten Bestandteile der Authentifizierung eines HTML-Formulars. E-Mail ist eine Teilmenge oder eine Folge von ASCII-Zeichen, die mit dem @-Symbol in zwei Teile geteilt wird. Der erste Teil besteht aus privaten Informationen und der zweite enthält den Domänennamen, in dem eine E-Mail registriert wird.

Hier sind die ASCII-Zeichen des ersten Teils:

  • Sonderzeichen wie # * + & ' ! % @ ? { ^ } ”
  • Numerische Zeichen (0 bis 9)
  • Punkt, Punkt usw. mit der Bedingung, dass es nicht der letzte oder allererste Buchstabe der E-Mail sein und nicht nacheinander wiederholt werden kann.
  • Großbuchstaben (A bis Z) und Kleinbuchstaben (a bis z).

Der zweite Teil umfasst Folgendes:

  • Punkte
  • Ziffern
  • Bindestriche
  • Briefe

Die Verwendung regulärer Ausdrücke ist eine der besten Methoden zur E-Mail-Validierung in JavaScript . Es verwendet reguläre Ausdrücke zum Definieren des Zeichenmusters.

Einige Beispiele für gültige E-Mail-IDs:

Einige andere Beispiele für ungültige E-Mail-IDs

  • [email protected] (Punkte übereinander sind nicht erlaubt)
  • Inownzsite()&@abcd.com (im regulären Ausdruck sind nur Zeichen, Bindestriche, Unterstriche und Ziffern zulässig.)
  • Ourwebsiteismne.azbyz.com (hier fehlt das @-Symbol)
  • [email protected] (Hier darf die Top-Level-Domain nicht mit einem Punkt beginnen)
  • @youmenandwe.we.net (hier darf es nicht mit dem @-Symbol beginnen)
  • [email protected] („.b“ ist keine gültige Top-Level-Domain)email.js

Die Datei besteht aus einem JavaScript-Code, der für die E-Mail-Validierung erforderlich ist. Hier werden die regulären Ausdrücke verwendet, um eine E-Mail auf der Client-Seite einer Anwendung zu validieren.

Prüfpunkte für eine effiziente E-Mail-Validierung im JavaScript-Code:

  • Beschreiben Sie einen regulären Ausdruck, um eine E-Mail-Adresse zu validieren
  • Wenn ein Eingabewert mit regulären Ausdrücken übereinstimmt
  • Wenn sie übereinstimmt, wird die Benachrichtigung „E-Mail-Adresse ist gültig“ gesendet.
  • Wenn dies nicht der Fall ist, senden Sie die Benachrichtigung mit dem Inhalt „E-Mail-Adresse ist ungültig“.

Verwandt: Passwortvalidierung in Javascript

E-Mail-Validierungscode in JavaScript

Unten ist der E-Mail-Validierungscode in JavaScript angegeben. Dieser Code kann validieren, ob die vom Benutzer erstellte oder eingegebene E-Mail gültig ist oder nicht. Speichern Sie die Datei als Dateiname.js.

// Codeschnipsel

Funktion EmailValidation(enteredEmail)

{

var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

if(eingegebeneE-Mail.Wert.Übereinstimmung(eingegebeneE-Mail))

{

alert("Yeah! eine gültige E-Mail!");

document.form1.text1.focus();

gib true zurück;

}

Anders

{

alert("Entschuldigung! eine ungültige E-Mail!");

document.form1.text1.focus();

falsch zurückgeben;

}

}

Die JavaScript-Funktion wird im HTML-Formular wie unten verwendet. Speichern Sie die Datei als filename.html:

<!DOCTYPE html>

<html lang="de">

<Kopf>

<meta charset="utf-8">

<title>E-Mail-Validierung in JavaScript</title>

<link rel='stylesheet' href='form-style.css' type='text/css' />

</head>

<body onload='document.form1.text1.focus()'>

<div class="mail">

<h2>Geben Sie die E-Mail-Adresse für die Validierung ein</h2>

<Formularname=”Formular1″ Aktion=”#”>

<ul>

<li><input type='text' name='text1'/></li>

<li> </li>

<li class=“Validate“><input type=“submit“ name=“Validate“ value=“Validate“ onclick=“ValidateEmail(document.form1.text1)“/></li>

<li> </li>

</ul>

</form>

</div>

<script src="filename.js"></script>

</body>

</html>

Der folgende Code kann dem Formular mithilfe von CSS Stil hinzufügen. Speichern Sie die Datei als Dateiname.css.

li {Listenstiltyp: keiner;

Schriftgröße: 16pt;

}

.mail {

Rand: automatisch;

Polsterung oben: 20px;

Polsterung unten: 20px;

Breite: 850px;

Hintergrund: rgb(150, 195, 208);

Rand: 1px solidd rgb(1, 20, 24);

}

.mail h2 {

Rand links: 36px;

}

Eingabe {

Schriftgröße: 28pt;

}

Eingabe:Fokus, Textbereich:Fokus{

Hintergrundfarbe: weiß;

}

Eingabe senden {

Schriftgröße: 18pt;

}

Jetzt können Sie den HTML-Code ausführen und die E- Mail-Validierung in JavaScript durchführen.

Lesen Sie: Javascript-Projekte in GitHub

Lernen Sie Softwarekurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Fazit

Die E-Mail-Validierung ist sehr wichtig, um zu vermeiden, dass ungültige E-Mail-Adressen erstellt werden. In diesem Artikel wird erklärt, mit dem Code zu validieren, ob eine E-Mail-ID gültig ist oder nicht, und das System überprüfen zu lassen und den Benutzer zu benachrichtigen, wenn die eingegebene E-Mail-ID ungültig ist.

Wenn Sie mehr über Full-Stack-Entwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training, mehr als 9 Projekte und Aufgaben bietet , IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.

Landen Sie in Ihrem Traumjob

Bewerben Sie sich jetzt für das Executive PG-Programm in der Full-Stack-Entwicklung