E-Mailprüfung mit JavaScript

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

2003-06-16 18:09:56 2003-06-16 18:09:56 andy@

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

mindestens zwei Zeichen vor dem @ stehen
Umlaute oder Leerzeichen verwendet werden
Sonderzeichen verwendet werden
nach dem @-Zeichen mindestens drei Zeichen stehen
der Punkt vor der Domainendung vorhanden ist
die Domainendung mindestens zwei Zeichen, maximal vier Zeichen oder museum beinhaltet

Es wird nicht geprüft, ob

die TLD mit einer Zahl beginnt
die TLD mit einem - beginnt
die TLD mit einem - endet
es die Domain überhaupt gibt

Wir beginnen mit einem ganz einfachen HTML-Formular:

<html>
<head>
  <title>E-Mailprüfung</title>
<style type="text/css">

</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:

Zeichenkette vor dem @-Zeichen
Domainname nach dem @-Zeichen
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:

alert('E-Mailadresse ist gültig :-)');
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:

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 :-(
document.emailtest.email.focus();
besagt, dass unser Textfeld des Formulars den Fokus bekommt. Soll heißen, der Cursor wird in das Textfeld gesetzt.
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

Author

andy@

Profil von andy@ anzeigen

`Erfahrungen`

Es sind noch keine Kommentare vorhanden.

Hier Kannst Du einen Kommentar verfassen

Programmierung - SQL

Dieser SQL-Kurs wendet sich vor allem an Programmierer, die mit Hilfe von SQL auf Datebaken zugreifen, und an alle, die Datenbanken neu entwerfen, erweitern oder abändern wollen ...

Autor : webmaster205@
Kategorie: mySQL-Tutorials

Gästebuch mit Datenbankanbindung

Dieses Tutorial beschreibt ausführlich wie ein Gästebuch in PHP und mySQL programmiert wird. ...

Autor : andy@
Kategorie: PHP-Tutorials

Einfaches News-Script

Das hier ist ein kleines Tutorial, um zu zeigen wie so ein News-Script aussehen kann. Im Grunde ist es nichts anderes als ein Gästebuch, in welches jedoch nur der Webmaster (oder sonstige authorisierte Personen) etwas eintragen kann. Natürlich kann man ...

Autor : pik
Kategorie: PHP-Tutorials

Templates mit PHP

Dieses Tutorial beschreibt in mehreren Teilen wie man Templates in PHP verwendet. Ferner erhält man eine Einführung in die Entwicklung eines eigenen Templatesystems. ...

Autor : mortalan@
Kategorie: PHP-Tutorials