E-Mailprüfung mit JavaScript

In diesem Tutorial wird gezeigt, wie eine E-Mailüberprüfung in JavaScript realisiert werden kann

E-Mailüberprüfung mit JavaScript

Dieses Tutorial beschreibt, wie man eine E-Mailadresse auf Ihre Gültigkeit überprüfen kann.

Es wird geprüft, ob

  1. mindestens zwei Zeichen vor dem @ stehen
  2. Umlaute oder Leerzeichen verwendet werden
  3. Sonderzeichen verwendet werden
  4. nach dem @-Zeichen mindestens drei Zeichen stehen
  5. der Punkt vor der Domainendung vorhanden ist
  6. die Domainendung mindestens zwei Zeichen, maximal vier Zeichen oder museum beinhaltet

Es wird nicht geprüft, ob

  1. die TLD mit einer Zahl beginnt
  2. die TLD mit einem - beginnt
  3. die TLD mit einem - endet
  4. es die Domain überhaupt gibt

Wir beginnen mit einem ganz einfachen HTML-Formular:

<html>
<head>
  <title>E-Mailprüfung</title>
<style type="text/css">
<!--
body, td {font-family:Verdana,Arial,Helvetica,sans-serif;font-size:8pt;color:#000000}
//-->
</style>
</head>
<body>
<form name="emailtest" action="" onSubmit="return testEmail();">
<table width="400" bgcolor="#000000" border="0" cellpadding="5" cellspacing="1" align="center">
  <tr>
    <td bgcolor="#dedede" align="center" colspan="2"><b>E-Mailprüfung</b></td>
  </tr>
  <tr>
    <td width="150" bgcolor="#dedede">E-Mailadresse*:</td>
    <td width="250" bgcolor="#ffffff"><input type="text" name="email" size="25"></td>
  </tr>
  <tr>
    <td bgcolor="#dedede" align="center" colspan="2"><input type="submit" name="submit" value="E-Mailadresse prüfen"></td>
  </tr>
</table>
</form>
</body>
</html>

Dieses einfache Formular beinhaltet ein Textfeld für die Eingabe der E-Mailadresse und einen Button um die Daten absenden zu können.

Wichtig bei diesem Formular sind zwei Angaben im form-Tag:
- Der Name des Formulars - name="emailtest"
- und der Event-Handler onSubmit

Den Namen brauchen wir, um nachher die Elemente (Textfeld mit der E-Mailadresse) des Formulars ansprechen zu können. Den Event-Handler brauchen wir, um dem Browser zu sagen, dass er vor dem Absenden der Daten eine Funktion namens testEmail aufrufen soll und das Ergebnis hiervon zurückgeben (return) soll.

So weit, so gut.
Wir werden nun eine Funktion schreiben, in der unsere E-Mailadresse mit einem sogenannten Regulären Ausdruck auf die Gültigkeit geprüft wird.

Da die Funktion auf jeden Fall vor dem Funktionsaufruf (in unserem Fall onSubmit) deklariert werden muss, schreiben wir diese in den head-Bereich unserer HTML-Seite. Allgemein ist es zu empfehlen, JavaScript-Funktionen in den head-Bereich zu schreiben.
Wird eine Funktion erst nach einem Funktionsaufruf deklariert, funktioniert das ganze nicht!

Wir schreiben also innerhalb der HTML-Tags <head> und </head> folgendes:

01 <script language="JavaScript">
02 <!--
03 function testEmail() {
04   if(document.emailtest.email.value.match(/^[a-zA-Z0-9_.-]{2,}@[a-z0-9-]{3,}.[a-z]{2,4}|museum$/))

05     alert('E-Mailadresse ist gültig :-)');
06     return true;
07   }else{
08     alert('E-Mailadresse ist NICHT gültig :-(');
09     document.emailtest.email.focus();
10     return false;
11   }
12 }
13 //-->
14 </script>

Erklärung der Funktion

Die ersten zwei und die letzten zwei Zeilen brauch ich hoffentlich nicht zu erklären.

In Zeile 03 deklarieren wir eine Funktion indem wir das Schlüsselwort function gefolgt vom Funktoinsnamen testEmail und folgenden runden Klammern () schreiben.
den Namen der Funktion können wir beliebig wählen. Die runden Klammern brauchen wir in jedem Fall.
Es folgt noch die geöffnete, geschweifte Klammer { als Zeichen dafür, dass nun die einzelnen Anweisungen der Funktion folgen.

In Zeile 04 geht´s auch gleich richtig zur Sache. Diese Zeile ist das Herzstück unserer Funktion.
Wir beginnen eine if-Abfrage in der wir das Textfeld email des Objektes emailtest ansprechen. Und zwar wird der Text (Inhalt) des Textfeldes (value) angesprochen und geprüft.
if(document.emailtest.email.value.match(...) bedeutet hier, dass der Inhalt des Textfeldes email mit dem übereinstimmen muss, was in der JavaScript-Methode match() angegeben ist.

Jetzt wird es für viele wahrscheinlich sehr kompliziert und viele werden nur Bahnhof lesen/verstehen. Aber nach Durchsicht der Erklärung müsste etwas Licht ins Dunkel gebracht werden ;-).

Zunächst einmal der reguläre Ausdruck für unsere E-Mailprüfung:

/^[a-zA-Z0-9_.-]{2,}@[a-z0-9-]{3,}.[a-z]{2,4}|museum$/

Wir beginnen mit einem Slash (/) am Anfang und am Ende des regulären Ausdruckes. Mit diesen Slashes bestimmen wir, dass es sich bei der folgenden Zeichenkette um einen regulären Ausdruck handelt.

Als nächstes tippen wir ein Dächlein (^), der sogenannte Zirkumflex. Dieser steht für den Anfang einer Zeichenkette.
Nun tippen wir ein Dollarzeichen ($), das uns das Ende der Zeichenkette kennzeichnet.
Alles was zwischen diesen beiden Zeichen liegt, ist unsere zu prüfende E-Mailadresse.

So sieht unser regulärer Ausdruck inzwischen aus:
/^$/

Unsere zu prüfende E-Mailadresse besteht aus drei Teilen:

  1. Zeichenkette vor dem @-Zeichen
  2. Domainname nach dem @-Zeichen
  3. Die Top-Level-Domain (de, com, info, museum usw usw usw)

Wer sich den regulären Ausdruck genauer anschaut, wird ebenfalls drei prüfende Bereiche feststellen, die im Folgenden erläutert werden.

Zunächst aber nochmals der gesamt Ausdruck:

[a-zA-Z0-9_.-]{2,}@[a-z0-9-]{3,}.[a-z]{2,4}|museum

Wir sehen drei mal einen Bereich innerhalb von eckigen Klammern [] und drei mal einen Bereich von geschweiften Klammern {}.

Innerhalb der eckigen Klammern werden die Zeichen definiert, welche in der E-Mailadresse erlaubt sind.
Innerhalb der geschweiften Klammern definieren wir die Anzahl, wieviele Zeichen mindestens vorhanden sein müssen und wie viele Zeichen maximal vorhanden sein dürfen.

Der erste Teil vor dem @-Zeichen

  • Innerhalb der eckigen Klammern
    Hier definieren wir die Zeichen, die in der E-Mailadresse vor dem @-Zeichen erlaubt sind.
    In unserem Fall also a-zA-Z0-9_.-
    Wir erlauben alle Kleinbuchstaben (a-z), alle Großbuchstaben (A-Z), alle Ziffern (0-9), den Unterstrich (_), den Punkt (.) und den Bindestrich (-).
    Da der Punkt in einem regulären Ausdruck eine besondere Bedeutung hat, müssen wir diesen, wenn wir ihn als Zeichen erlauben wollen, mit einem Backslash () auskommentieren.
  • Innerhalb der geschweiften Klammern
    Hier definieren wir die Anzahl an Mindest- und Maximalzeichen, die die E-Mailadresse vor dem @-Zeichen enthalten darf
    In unserem Fall {2,}
    Die erste Zahl definiert die Mindestanzahl an Zeichen, die vorhanden sein müssen.
    Nach dem Komma können wir eine Zahl schreiben, die die maximal erlaubte Anzahl an Zeichen definiert. Diese lassen wir aber hier offen.
    Es können also beliebig viele Zeichen getippt werden. Würden wir das Komma weglassen, so würde unsere E-Mailadresse nur dann stimmen, wenn genau zwei Zeichen vor dem @-Zeichen stehen. Probiert es aus!

Wir tippen noch das @-Zeichen, als Merkmal dafür, dass das @-Zeichen folgt und vorhanden sein muss.

Der zweite Teil nach dem @-Zeichen

  • Innerhalb der eckigen Klammern
    Hier definieren wir wieder die erlaubten Zeichen, die in einer E-Mailadresse nach dem @-Zeichen vorhanden sein dürfen.
    Dies sieht bei uns wie folgt aus:
    [a-z0-9-]
    Wir erlauben hier nur alle Kleinbuchstaben (a-z), alle Ziffern (0-9) und den Bindestrich (-).
  • Innerhalb der geschweiften Klammern
    Hier wird wieder die Anzahl an Mindest- und Maximalzeichen definiert.
    In unserem Fall {3,}
    Warum jetzt hier plötzlich drei Zeichen mindestens?
    Ganz einfach:
    Ein Domainname muss aus mindestens drei Zeichen bestehen. Und da nach dem @-Zeichen der Domainname folgt, geben wir als Minimum drei an.
    Es folgt wieder das Komma und kein Maximum.

Nach dem Domainnamen folgt bekanntlich der Punkt (irgendwas@irgendwo.wo).
Also tippen wir wieder den Backslash um anzuzeigen, dass der Punkt keine Funktion des regulären Ausdrucks erfüllt, sondern, dass der Punkt an dieser Stelle der E-Mailadresse vorhanden sein muss.

Der dritte Teil nach dem Punkt für die Top-Level-Domain

  • Innerhalb der eckigen Klammern
    Wieder einmal geht es "nur" um die Definition der erlaubten Zeichen. Die sieht so aus:
    [a-z] Hier werden nur alle Kleinbuchstaben erlaubt (a-z). Wenn einer von Euch Top-Level-Domains kennt, die noch andere Zeichen beinhalten, bitte eine E-Mail an mich ;-)
  • Innerhalb der geschweiften Klammern
    Eine Top-Level-Domain besteht aus mindestens zwei, maximal vier Zeichen oder museum. Aus diesem Grunde sieht unser Ausdruck hierfür folgendermaßen aus:
    {2,4}|museum
    Wir definieren die Mindestzahl zwei und die Maximalzahl vier. Es werden keine fünf Zeichen oder ein einzelnes Zeichen akzeptiert. Da es aber inzwischen die Top-Level-Domain museum gibt, müssen wir diese berücksichtigen. Dies geschieht durch das Anhängen per ODER (Pipe-Zeichen |) gefolgt von museum.

Nach unserer Definition der if-Abfrage folgt eine geöffnete geschweifte Klammer als Zeichen dafür, was passieren soll, wenn die Bedingung erfüllt ist.

Ist die Bedingung erfüllt (korrekte E-Mailadresse), folgen zwei Anweisungen:

  1. alert('E-Mailadresse ist gültig :-)');
  2. return true;

Die erste Anweisung erzeugt ein Fensterlein mit einer OK-Schaltfläche und dem Text E-Mailadresse ist gültig :-) Die zweite Anweisung besagt, dass die Funktion als Ergebnis true (wahr) zurückgeben soll. Die E-Mailadresse stimmt also und die Daten werden gesendet.

Sollte die eingegebene E-Mailadresse allerdings falsch sein, so geht unsere Funktion in den else-Zweig.

Der else-Zweig beinhaltet drei Anweisungen:

  1. alert('E-Mailadresse ist NICHT gültig :-(');
    Es erscheint ein kleines Fensterlein mit OK-Schaltfläche und dem Text E-Mailadresse ist NICHT gültig :-(
  2. document.emailtest.email.focus();
    besagt, dass unser Textfeld des Formulars den Fokus bekommt. Soll heißen, der Cursor wird in das Textfeld gesetzt.
  3. return false; heißt:
    Unsere Funktion gibt den Wert 0 zurück. Die Daten werden also nicht gesendet. Stattdessen haben wir erneut die Möglichkeit, unsere E-Mailadresse einzugeben.

Download des Quellcodes

Erfahrungen

Es sind noch keine Kommentare vorhanden.

Hier Kannst Du einen Kommentar verfassen


Bitte gib mindestens 10 Zeichen ein.
Wird geladen... Bitte warte.
* Pflichtangabe

Verwandte Beiträge

ASCII Datenbanken

ASCII Datenbanken sind eigentlich nur Textdateien, in denen man Daten speichert, die durch ein Trennzeichen voneinander getrennt sind. Dieses Tutorial zeigt wie es geht. Mit Übung und Lösung ...

deep_space_nine@

Autor : deep_space_nine@
Kategorie: PHP-Tutorials

Zugriff auf die Facebook Graph API mit PHP

In diesem Beispiel zeigt Joey Rivera wie man auf Facebook mit Hilfe von PHP und der Facebook Graph API zugreifen kann. ...

admin

Autor : admin
Kategorie: PHP-Tutorials

PHP-Scripte offline testen unter Windows

Wenn Sie sich schon mit der Erstellung von dynamischen Websiten beschäftigt haben, wissen Sie vielleicht wie umständlich es ist, die Scripte immer auf den Server Ihres Hosters zu laden um diese testen zu können. ...

webmaster116@

Autor : webmaster116@
Kategorie: Linux & Server Tutorials

Wie kann man komplexe Abfragen mit SQL-Querys In MySQLi effektiv durchführen?

In diesem MySQL-Tutorial wird erklärt, wie komplexe SQL-Abfragen in MySQLi effizient durchgeführt werden können. Wir werden uns mit verschiedenen Aspekten der Datenbankabfrage beschäftigen und spezifische Methoden kennenlernen. ...

TheMax

Autor : TheMax
Kategorie: mySQL-Tutorials

SVN Server einrichten

Wie man unter Linux einen Subversion Server einrichtet. ...

admin

Autor : admin
Kategorie: Linux & Server Tutorials

Definition von Stored Procedures - eine Einführung

Stored Procedures sind vordefinierte SQL-Codeblöcke, die in einer Datenbank gespeichert sind und bei Bedarf aufgerufen werden können. ...

Bernie

Autor : ebiz-consult GmbH & Co. KG
Kategorie: mySQL-Tutorials

Was muss ich in WordPress einstellen, damit Google Fonts nicht mehr geladen werden?

Möchten Du WordPress davon abhalten, Google Fonts zu verwenden? Hier erfährst Du, was du dafür in WordPress einstellen musst. ...

admin

Autor : admin
Kategorie: Sonstige Tutorials

Tutorial veröffentlichen

Tutorial veröffentlichen

Teile Dein Wissen mit anderen Entwicklern weltweit

Du bist Profi in deinem Bereich und möchtest dein Wissen teilen, dann melde dich jetzt an und teile es mit unserer PHP-Community

mehr erfahren

Tutorial veröffentlichen