|

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.
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.
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.
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.
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.
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.
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.
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>
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.
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.
|
 |