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">
<!--
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.
Ratings
Here you can write a comment
Related topics
Objektorientiertes Programmieren
Dieses Tutorial beschreibt sehr gut die Wirkunsweise von objektorientiertes Programmieren. Also bestens geeignet um das objektorientierte Programmieren zu verstehen. ...
Autor :
phpsven
Category:
PHP-Tutorials
Login/Memberbereich mit Sessions
Adminmodul für das eigene Gästebuch, Controlpanel eines Forum oder einfach nur für ein geschützer Bereich. ...
Autor :
webmaster1@
Category:
PHP-Tutorials
Midjourney Tutorial - Instructions for beginners
There is an informative video about Midjourney, the tool for creating digital images using artificial intelligence, entitled "Midjourney tutorial in German - instructions for beginners" ...
Autor :
Mike94
Category:
KI Tutorials
grafischen Counter
Oftmals wird gefragt wie man einen grafischen Counter mit PHP realisieren könnte. Hier ist die Antwort ...
Autor :
t63@
Category:
PHP-Tutorials
Hier ein kleines allgemeines Tutorial zu PHP
Die Einleitung ist in folgende Themen aufgeteilt: -Einleitung -Variablen -Parameterübergabe -Funktionen -Schleifen -IF-Abfragen Am besten Sie schauen sie sich der Reihenfolge nach an. ...
Autor :
demiangrandt@
Category:
PHP-Tutorials
SVN Server einrichten
Wie man unter Linux einen Subversion Server einrichtet. ...
Autor :
admin
Category:
Linux & Server Tutorials
