Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Regular Expressions


Regular expressions: abstrakte Formulierung eines Textes
Syntax zur verwendung von Regular Expression mit JavaScript
match()
exec()
search()
test()
compile()
replace()
split()
Mit einer Regular expressions die Richtigkeit einer email Adresse prüfen
Mit einer Regular expressions den Namen, PLZ, e-mail und einen Beitrag in einem Formular prüfen

Regular expressions: abstrakte Formulierung eines Textes

Regular expressions sind die abstrakte Formulierung eines wie auch immer strukturierten Textes. Email Adressen haben eine Struktur, die Adresse einer Website hat eine Struktur, eine Telefonnummer hat eine Struktur, eine Postleitzahl hat eines Struktur. Alles was eine Struktur hat, lässt sich über regular expressions durchsuchen und verändern. Machen wir uns das an einem konkreten Beispiel klar. Eine Adresse wie Andres_Ehmann@web.de hat eine Struktur. Zuerst kommt eine Reihe alphanummerischer Zeichen, ein Punkt oder ein Unterstrich, dann ein @ Zeichen, dann wieder eine Reihe alphanummerischer Zeichen Punkt oder Unterstrich, als letztes Element muss ein Punkt kommen dann eine Einheit von mindestens zwei und höchstens drei Buchstaben. Will man also zum Beispiel alle email Adressen in einer Website finden, dann muss man diese Struktur nachbilden. Machen wir und das nochmal klar. Wir haben folgende email-Adressen.

Andres_Ehmann@web.de
infos@infos24.de
ron_sommer@t-online.de
breitschwerdt@mercedes-benz.com
Alle diese Adressen haben folgende Struktur.
[beliebige Anzahl Buchstaben oder Zahlen oder . oder _ oder -]
[@ Zeichen]
[beliebige Anzahl Buchstaben oder Zahlen oder . oder _ oder -]
[.]

[mindestens zwei höchstens vier Buchstaben]
Das oben stehende ist die abstrakte Formulierung einer email-Adresse, wenn auch in Pseudo Code. Man könnte also durch Eingabe einer solch abstrakt formulierten Struktur alle email-Adressen finden. Man könnte aber noch mehr tun. Man könnte alles rausfischen, was nach dem Zeichen "@" kommt, also die Domains, web.de, mercedes-benz.com, t-online oder das was vor dem Zeichen "@" steht ändern in info etc. etc. Regular expressions haben für die Internet Programmierung eine enorme Bedeutung. In der Internetprogrammierung z.B. beschäftigt viele Leute die Frage, wie man erzwingen kann, dass der User bei Formularen nur Werte eingibt, die einigermassen plausibel sind, also bei Postleitzahl eine Zahl mit 5 Stellen, bei Name und Ort nur Buchstaben, eine WWW und eine email Adresse soll eine bestimmte Struktur haben etc. etc. Regular Expression wurden ausführlich sowohl im Perl Handbuch als auch im PHP Handbuch beschrieben. Die Regular Expression in JavaScript sind angelehnt an Perl, allerdings ist die Syntax anders.

Syntax zur verwendung von Regular Expression mit JavaScript

Bevor wir ein oft auftretendes Problem lösen, nämlich die clientseitige Überprüfung der Eingaben in ein HTML Formular, wollen wir uns kurz die allgemeine Syntax an ein paar einfachen Beispielen klar machen. Die Syntax ist in JavaScript uneinheitlich. Insgesamt stehen für Regular Expression diese Funktionen zur Verfügung.

match()
search()
test()
exec()
replace()
split()
compile()


match(), exec(),search(),test() und compile() suchen das durch die regular expression definierte Suchmuster in einer Zeichenkette. Es drängt sich nun die Frage auf, was die fünf voneinander unterscheidet. Innerhalb der fünf können wir Gruppen bilden. match() und exec() machen das gleiche, allerdings auf eine unterschiedliche Art und Weise. Während match() eine Methode einer Zeichenkette ist, ist exec() die Methode einer (Instanz von) Regular Expression. Beide geben aber 1 aus, wenn das gesuchte Muster in der durchsuchten Zeichenkette vorhanden ist und 0, wenn es nicht vorhanden ist. Diese zwei Funktionen unterscheiden sich also lediglich in der Art, wie sie aufgerufen werden. Wir klären im folgenden erstmal die Unterschiede anhand einer sehr simplen regular expression. Nachdem das geklärt ist, werden wir uns mit den regular expressions befassen.

match()

Der Aufruf erfolgt als Methode eines Strings. Rückgabe Array. Kategorie:Suchen
Der Array hat hierbei folgende Werte
array_name.index=>Position des Zeichens, wo der Teil anfängt, der mit der regular expression übereinstimmt
array_name.input=>Die zu durchsuchende Zeichenkette, wo sie übergeben wurde
array_name[0]=>Erfasst alles, was mit der regular expression übereinstimmt, unabhängig davon, ob es via ( ) zum Speichern vorgemerkt wurde
arry_name[1] array_name[2] etc => Erfasst den Teil der regular expression, der vom ersten, zweiten etc. Klammerpaar umschlossen wird.
Wie unschwer zu erkennen, ist das jetzt kompliziert. Wir machen uns das an einem Beispiel klar und erklären dann die Details.

<script language=javascript>
zeichenketta="Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht";
function testen1()
{
if(speicher=zeichenketta.match("was(.....).........(....).....(.......)"))
{
alert("Treffer bei Zeichen Nr. : "+speicher.index+"\nDie gesamte Zeichenkette: "+speicher.input+"\nDie gesamte reg.exp: "+speicher[0]+"\nerste Klammer:"+speicher[1]+"\nzweite Klammer: "+speicher[2]);
}
else
{
alert("Das gesuchte Wort ist nicht enthalten");
}
}
</script>

Wer sehen will, was passiert, muss hier klicken. Alles klar?
Wir erhalten für speicher.index den Wert 16, weil das w von was, also die Stelle ab der dir regular expression mit der zu durchsuchenden Zeichenkette übereinstimmt, an Position 16 steht.
für speicher.input die ursprüngliche Zeichenkette, also das, was wir durchsucht haben.
für speicher[0] erhalten wir "was kommt danach, der andere frag". Was ist das ? Ein Punkt steht in einer regular expression für irgendein x-beliebiges Zeichen. Wir haben 34 Stück davon. Folglich schnappt sich die regular expression noch 34 Zeichen nach was. Der gesamte Ausdruck, der von der regular expression umfasst wir, besteht also aus was und den nächsten 34 Zeichen. Das mit den runden Klammern klären wir gleich.
für speicher[1] erhalten wir "komm". Wie das ? Was in den runden Klammern steht, wird zwischengespeichert. Hierbei kann der Inhalt der ersten runden Klammer mit speicher[1] rausgefischt werden, der Inhalt der zweiten Klammer mit speicher[2] etc. Beispiel: In der ersten Klammer stehen 5 Punkte. Ein Punkt steht für jedes x-beliebige Zeichen, also auch für ein Leerzeichen. Wir erhalten also komm und ein Leerzeichen.
Um die Verwirrung komplett zu machen. Übergeben wir den Rückgabewert der Funktion match() nicht an einen Array, dann ist das in der boolschen Logik trotzdem true, weil ja zumindest irgendetwas zurückgegeben wurde. Das heisst, auch wenn wir den Rückgabewert nicht an einen Array übergeben, würde das von der if Bedingung Umklammerte trotzdem ausgeführt.

exec()

Der Aufruf erfolgt als Methode einer regular expression. Rückgabe Array. Kategorie:suchen
Die Funktion exec() ist mit der Funktion match() völlig identisch. Allerdings ist exec() eine Methode der regular expression und nicht der zu durchsuchenden Zeichenkette.

<script language=javascript>
reg_ex=/was(.....).........(....).....(.......)/;
function testen3()
{
if(reg_ex.exec("Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht"))
{
alert("Das gesuchte Wort ist enthalten");
}
else
{
alert("Das gesuchte Wort ist nicht enthalten");
}
}
</script>
<A href=javascript:testen3()>testen</A>.

Wer sehen will, was passiert, muss hier klicken.

Wie deutlich zu erkennen, ist das Ergebnis das gleiche wie bei match(). Auch der Rückgabewert ist der gleiche. Wie deutlich zu erkennen, ist aber die Syntax anders als bei match(). match() ist eine Methode der zu durchsuchenden Zeichenkette und erhält als Parameter die regular expression. exec() ist eine Methode der regular expression und erhält als Parameter die zu durchsuchende Zeichenkette. Man kann nun die Meinung vertreten, dass eine der beiden überflüssig ist und hat unter Umständen sogar recht.

search()

Der Aufruf erfolgt als Methode einer Zeichenkette. Rückgabe true oder false. Kategorie suchen
Auch mit der Methode search() lässt sich prüfen, ob ein Teil oder die ganze zu durchsuchende Zeichenkette mit dem in der regular expression definierten Muster übereinstimmt. Allerdings ist search simpler gestrickt. Sie gibt true zurück, wenn das Muster gefunden wird und false, wenn dies nicht der Fall war. Sie liefert also weniger Informationen als die Methoden exec() oder match. Die runde Klammer ist mit dieser Funktion nicht verwendbar, weil sie ja die entsprechenden Werte nicht abfängt.

<script language=javascript>
zeichenkette="Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht";
function testen4()
{
if(zeichenkette.search("Freie"))
{
alert("Das gesuchte Wort wurde gefunden");
}
else
{
alert("Das gesuchte Wort ist nicht enthalten");
}
}
</script>
<A href=javascript:testen4()>testen</A>.

Wer es sich anschauen will, was passiert, kann hier drücken.

test()

Der Aufruf erfolgt als Methode einer regular expression. Rückgabe true oder false. Kategorie:suchen
Die Methode test() ist mit der Methode search vom Ergebnis her vollkommen identisch. Allerdings ist test() eine Methode der regular expression, die als Parameter die zu durchsuchende Zeichenkette übergeben bekommt.

<script language=javascript>
reg_ex3=/Freie/;
function testen5()
{
if(reg_ex3.test("Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht"))
{
alert("Das gesuchte Wort wurde gefunden");
}
else
{
alert("Das gesuchte Wort ist nicht enthalten");
}
}
</script>
<A href=javascript:testen5()>testen</A>

Wer es sich anschauen will, was passiert, kann hier drücken.

compile()

Der Aufruf erfolgt als Methode einer regular expression. Rückgabe true oder false. Kategorie:suchen
Die Methode compile ist mit der Methode test() identisch. Allerdings compiliert sie die regular expression. Die Verwendung dieser Methode bietet sich also dann an, wenn dieselbe regular expression öfter verwendet wird. Die Abarbeitung ist dann schneller.

<script language=javascript>
reg_ex=new RegExp("Freie");
function testen6()
{
if(reg_ex.compile("Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht"))
{
alert("Das gesuchte Wort wurde gefunden");
}
else
{
alert("Das gesuchte Wort ist nicht enthalten");
}
}
</script>
<A href=javascript:testen6()>testen</A>

Wer es sich anschauen will, was passiert, kann hier drücken.

replace()

Der Aufruf erfolgt als Methode einer Zeichenkette. Zurückgegeben wird die modifizierte Zeichenkette. Kategorie:ersetzen
Die Funktion entspricht der Funktion s/// in Perl bzw. preg_replace in PHP.

<script language=javascript>
zeichenkette="Der eine fragt, was kommt danach, der andere fragt nur, ist es recht, so also unterscheidet sich, der Freie von dem Knecht";

function testen7()
{
alert(neue_Zeichenkette=zeichenkette.replace(/Freie/,"Geschäftsmann") )
}
</script>
<A href=javascript:testen7()>testen</A>

Wer es sich anschauen will, was passiert, kann hier drücken.

split()

Der Aufruf erfolgt als Methode einer Zeichenkette. Zurückgegeben wird ein Array mit den Einzelteilen der Zeichenkette. Kategorie:ersetzen
split() zerhackt eine Zeichenkette an einem sogenannten delimiter. Haben wir also eine Zeichenkette der Art
Andrés Ehmann§§Clara Montes§§Eduardo Aute§§Manuel Serrat
dann können wir am §§ diese Zeichenkette in Einzelteile aufspalten.

<script language=javascript>
einzelteile=new Array();
zeichenkette="Andrés Ehmann§§Clara Montes§§Eduardo Aute§§Manuel Serrat";
einzelteile=zeichenkette.split(/§§/);

function testen8()
{

for(i=0;i<einzelteile.length;i++)
{
alert(einzelteile[i]);
}
}
</script>
<A href=javascript:testen8()>testen</A>

Wer sich anschauen will, was passiert, kann hier drücken.

Mit einer Regular expressions die Richtigkeit einer email Adresse prüfen

Damit haben wir alle Funktionen, die im Zusammenhang mit regular expression genutzt werden können, vorgestellt. Allerdings haben wir uns noch nicht mit den regular expression selber befasst. Wie bereits erwähnt, befindet sich eine Einführung zu regular expression sowohl im Perl Handbuch unter regular expressions als auch im PHP Handbuch unter regular expressions. Wir werden folglich hier nicht mehr im detail darauf eingehen. Wir werden lediglich anhand eines typischen Problems aus der Internetprogrammierung die Arbeitsweise zeigen. Ein typisches Problem der Internetprogrammierung ist die Überprüfung der Eingaben des Users auf Korrektheit. Das heisst, wir wollen wissen, ob z.B. eine email Adresse zumindest formal richtig ist. Wir haben zwei Möglichkeiten, diese Überprüfung durchzuführen: serverseitig oder clientseitig. Für die serverseitige Implementierung der Prüfungroutine spricht, dass der User dann keine Möglichkeit hat, diese Prüfung zu unterbinden. Dagegen spricht, dass die falschen Daten zuerst an den Server geschickt werden und der dann feststellt, dass sie falsch sind und eine entsprechende Fehlermeldung zurückschickt. Gegen die clientseitige Implementierung spricht, dass der User diese Prüfung sehr leicht umgehen kann, indem er die entsprechende HTML Seite abspeichert, den JavaScript Code entfernt und dann die Daten abschickt. Dafür spricht, dass ein Übertragen der falschen Daten an den Fremdrechner entfällt. Genau genommen ist aber in der Regel sowieso nur eine Überprüfung auf formale Richtigkeit möglich. Das heisst, eine email Adresse vom Typ Balduin_der_Huennenkoenig@ass_zuviel_und_ts-ts-ts_zuwenig.de ist formal gesehen richtig, trotzdem existiert sie nicht. Die meisten falschen Angaben passieren auch nicht aus Bosheit, sondern aus Unaufmerksamkeit. Diese Fehler kann man dann auch clientseitig abfangen. Im folgenden ein kleiner JavaScript, der die formale Richtigkeit einer email Adresse prüft.

<script language=javascript>
function pruefen()
{
zeichenketten=document.emailito.mailin.value;
reg_ex5=/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/;

if(reg_ex5.test(zeichenketten))
{
alert("Die email Adresse ist gültig");
}
else
{
alert("Die email Adresse ist nicht gültig");
}
}
</script>
<form name=emailito>
email <input type=text name=mailin><input type=button value="email prüfen" onClick=pruefen()></form>

email

Es ist ziemlich einfach, herauszufinden, ob dieser Skript tatsächlich eine email Adresse auf syntaktische Richtigkeit abprüft. Korrekte Adressen sehen so aus
infos@infos24.de
Andres_Ehmann@web.de etc. etc.
Bill.Gates@microsoft.com
Nicht korrekte email Adressen sehen so aus
infos@infos 24.de
_Bill.Gates@microsoft.com
Andres_Ehmann@web.infoline etc. etc. etc.
Man kann nun eine Weile korrekte und nicht korrekte email Adressen eingeben und testen, ob der Skript, genauer gesagt die regular expression korrekt arbeitet. Machen wir uns klar, wie das funktionniert. Abstrakt formuliert, haben email Adressen folgendes Aussehen.
[ein Buchstabe oder eine Zahl]
[beliebige Anzahl Buchstaben oder Zahlen oder . oder _ oder -]
[@ Zeichen]
[beliebige Anzahl Buchstaben oder Zahlen oder . oder _ oder -]
[.]
[mindestens zwei höchstens vier Buchstaben]
Diese Struktur müssen wir also in einer regular expression nachbilden und genau das ist es, was wir tun. Schauen wir uns die regular expression mal genauer an. Wir beginnen mit einem Dach ^, damit erzwingen wir, dass unsere regular expression schon zu Beginn der zu durchsuchenden Zeichenkette mit unserer Mail übereinstimmen muss. Täten wir das nicht, wäre "tralala Andres_Ehmann@web.de" eine gültige email Adresse. Am Anfang darf ein Wordelement \w stehen. Die Frage, was ein Wordelement ist, beschäftigt immer wieder viele Leute. Ein Wordelement ist das, was bei Unix Bestandteil eines Dateinnamens sein darf, um es ganz deutlich zu sagen: abcdefghijklmnopqrstxyz_1234567890 sind Wordelemente. Also deutsche Umlaute, scharf s, Leerzeichen gehören nicht dazu. Wir gehen also davon aus, dass email Adressen nicht mit einem Punkt und auch nicht mit einem Bindestrich beginnen dürfen, weil uns eine solche email Adresse bislang noch nicht untergekommen ist. Danach allerdings kann uns sehr wohl ein Punkt oder ein Bindestrich begegnen. A.Ehmann@web.de bzw.
A-Ehmann@web.de sind gültige email Adressen. Wir bilden also anschliessen eine Gruppe. Eine Gruppe definieren wir durch die eckigen Klammern [ ]. Was in der eckigen Klammer steht, ist durch ein oder verknüpft, nach dem Wordelement am Anfang darf also ein weiteres Wordelement \w stehen, ein Punkt oder ein Bindestrich. Der Punkt ist eigenartig deklariert, nämlich mit einem Backslash, wir schreiben \.. Das tun wir, weil, wie bereits erwähnt, der Punkt innerhalb der Definition einer regular expression eine besondere Bedeutung hat, er steht für jedes x-beliebige Zeichen. Mit dem Bachslash, dem Escape Operator, teilen wir mit, dass er diese Bedeutung nicht hat, er ist hier lediglich ein Welt, Wald und Wiesen Punkt. Von den Elementen, die wir innerhalb der eckigen Klammer definiert haben, muss mindestens eins oder beliebig viele vorkommen. Das erreichen wir durch das + Zeichen. Das + Zeichen bedeutet, dass das Element unmittelbar davor, mindestens einmal, oder beliebig oft auftauchen darf. Das + Zeichen marschiert nun weiter, bis es auf das Muster stößt, welches ihm folgt, das ist in unserem Falle das @ Zeichen. Das heisst, wenn zwischen dem ersten \w und dem @ Zeichen, irgendetwas steht, was kein \w oder . oder - ist, dann passt das Muster nicht, und die Funktion test() gibt false zurück. Nachdem @ Zeichen machen wir wieder etwas ähnliches, wie schon zu Beginn. Wir schöpfen aus unserer Erfahrung und gehen davon aus, dass es solche email Adressen nicht gibt. Andres_Ehmann@-web.de oder Andres_Ehmann@.web.de, sehr wohl aber solche Andres_Ehmann@w-e-b.de, oder Andres_Ehmann@w.e.b.de. Unmittelbar nach dem @ Zeichen lassen wir also nur Wordelemente zu. Anschliessend erlauben wir, bis zum letzten Punkt, Wordelemente oder Punkte oder Bindestriche. Die Angelegenheit hat jetzt ein kleines schwieriges Detail, das wir auch unterschlagen könnten, aber wir erklären es. Woher weiss das + Zeichen eigentlich bis zu welchem Punkt es wandern soll, wenn mehrere Punkte da sind. es soll ja wandern bis zu dem Punkt vor der Top Level Domain, also bis zu dem Punkt vor com, de, fr, info etc. ? Die Antwort auf diese Frage ist einfach.
Das + Zeichen (wie auch der Stern, der für 0 Mal oder beliebig oft steht) ist, so der terminus tecnicus, greedy gierig. Das heisst er greift durch bis er das Muster, dass nach ihm definiert wird, zum letzten Mal in der zu durchsuchenden Zeichenkette findet. Er greif also, ohne dass man irgendetwas dafür tut, durch bis zu dem Punkt vor der Top Level Domain, wo er in unserem Fall ja auch hin soll. Wir verweisen für die Details nochmal auf das Perl, bzw. das PHP Handbuch. Sind wir bei dem Punkt angelangt, dürfen nur noch Buchstaben folgen. Wir hätten die Möglichkeit, sie alle einzeln einzugeben. Regular expression bieten uns aber eine kürzere Schreibweise an, von der wir dann natürlich Gebrauch machen ([A-Za-z]). Das heisst, es dürfen alle Buchstaben, ausgenommen, deutsche Umlaute, scharf s etc. vorkommen und diese sowohl in Groß- als auch in Kleinschreibung. Von diesen allerdings darf es nicht beliebig viele geben. Es muss mindestens zwei davon geben (fr, de, es) aber höchsten vier (info). Danach müssen wir dafür sorgen, dass unser Muster mit dem Ende der zu durchsuchenden Zeichenkette übereinstimmt, das erreichen wir durch die Angabe eines $ Zeichens. Wenn wir das wegließen, wäre "Andres_Ehmann@web.de tralala" eine gültige email Adresse. Damit haben wir dann ein Problem, dass die Menschheit immer mal wieder beschäftigt, gelöst. Betrachten wir abschliessend nochmal, wie man ein komplettes Formular überprüft. Hierbei wollen wir überprüfen, ob die email Adresse zumindest formal korrekt ist, ob bei Postleitzahl tatsächlich eine Zahl mit fünf Ziffern eingegeben wurde, ob der Text mindestens 5 und höchstens 30 Zeichen hat und ob bei der Angabe des Namens wirklich nur Buchstaben und Leerzeichen vorhanden sind.

Mit einer Regular expressions den Namen, PLZ, e-mail und einen Beitrag in
einem Formular prüfen

<html><head><title>Formularcheck</title>
<script language=javascript>
function pruefen2()
{
email=document.formulus.mail.value;
plz=document.formulus.plzet.value;
beitrag=document.formulus.beitrage.value;
FName=document.formulus.FName.value;
reg_ex_email=/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/;
reg_ex_plz=/\d{5}/;
reg_ex_beitrag=/^\w{5,30}$/;
reg_ex_FName=/^[a-zA-Z´\s]*$/;
pruef_email=reg_ex_email.test(email);
pruef_plz=reg_ex_plz.test(plz);
pruef_beitrag=reg_ex_beitrag.test(beitrag);
pruef_FName=reg_ex_FName.test(FName);

if(pruef_email && pruef_plz && pruef_beitrag && pruef_FName)
{
aufblenden();
document.formulus.submit();
}
else
{
if(!pruef_plz) alert("Postleitzahl stimmt nicht");
if(!pruef_email)alert("email stimmt nicht");
if(!pruef_beitrag)alert("Beitrag stimmt nicht");
if(!pruef_FName)alert("Das ist kein Name");

}
}
</script>
<body>
<form name=formulus action=http://www.infos24.de/phpskripte/gastbuch.php target=fenschterle>
<table>
<tr><td>email Adresse</td><td><input type=text name=mail></td></tr>
<tr><td>Postleitzahl</td><td><input type=text name=plzet></td></tr>
<tr><td>Beitrag</td><td><input type=text name=beitrage></td></tr>
<tr><td>Name</td><td><input type=text name=FName></td></tr>
<tr><td colspan=3 align=middle><input type=button value="abschicken" onClick=pruefen2()></td></tr>
</table>
</form>
</body>
</html>

Wer ausprobieren will, ob das auch tatsächlich funktionniert, der kann hier die entsprechenden Werte eingeben. Ist das Formular korrekt ausgefüllt worden, erfolgt eines Weiterleitung an das Gästebuch. Allerdings erfolgt kein Eintrag. Das wäre zwar problemlos möglich, passt aber konzeptionell nicht ins Schema.

 

email Adresse
Akzeptiert werden nur formal richtige Adressen
 
Postleitzahl
Es ist eine Zahl mit 5 Stellen einzugeben

 
Beitrag
Der Beitrag muss mindestens 5 und darf höchsten 30 Zeichen haben
 
Name
Der Name darf nur aus Buchstaben und Leerzeichen bestehen
 
 
Sprechen wir noch durch, wie dieser Skript funktionniert. Als erstes fällt uns auf, dass die Werte des Formulars nicht über einen submit Knopf übergeben werden. Das wäre auch nicht besonders sinnvoll. Würde man das tun, dann könnte man die Eingaben zwar immer noch clientseitig überprüfen, allerdings wären sie schon vor der Prüfung verschickt worden. Wenn wir das Formular von JavaScript via document.formulus.submit() verschicken lassen, dann haben wir die Möglichkeit, die Eingaben des Users nur dann an den Fremdrechner zu schicken, wenn alle Eingaben korrekt sind. Folglich haben wir an der Stelle, wo normalerweise der submit Knopf steht, einen button, an den wir den event handler onClick binden. Dieser ruft die Funktion pruefen2() auf. Hier wird geprüft, ob alle Eingaben korrekt sind. Wenn sie das sind, wird ein neues Fenster augepoppt, in welches wir das Gästebuch reinladen und die Formulardaten übergeben. Wenn nicht, wird eine passende Fehlermeldung ausgegeben. Betrachten wir den Skript im Detail. Zu Beginn haben wir

email=document.formulus.mail.value;
plz=document.formulus.plzet.value;
beitrag=document.formulus.beitrage.value;
FName=document.formulus.FName.value;

Damit holen wir die Eingaben des Users in eine entsprechende Variable. Zu jeder Variablen definieren wir dann die regular expression.

reg_ex_email=/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/;
reg_ex_plz=/\d{5}/;
reg_ex_beitrag=/^\w{5,30}$/;
reg_ex_FName=/^[a-zA-Z´\s]*$/;


pruef_email=reg_ex_email.test(email);
pruef_plz=reg_ex_plz.test(plz);
pruef_beitrag=reg_ex_beitrag.test(beitrag);
pruef_FName=reg_ex_FName.test(FName);

Stimmt das durch die regular expression definierte Muster mit den Eingaben des Users überein, erhalten wir true, wenn nicht false. Das von der if Bedingung Umklammerte wird also nur ausgeführt, wenn alle pruef_XXX true sind. Über pruef_XXX ist es dann auch möglich, eine detaillierte Fehlermeldung auszugeben.

vorhergehendes Kapitel