|
 
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">
<!--
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:
- 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.
|
