Beispiel für umfassenden Test von Formulareingaben auf Korrektheit.
Fehlerausgabe beim Abschick-Versuch (ggf. iterative Abarbeitung der Fehler)
Testen Sie obiges Skript, indem Sie fehlerhafte Eingaben machen, wie z.B.:
(Hinweis: mit NN4 können in den Fehlermeldungen keine Umlaute ausgegeben werden, das Skript funktioniert aber dennoch.)
Erläuterung des Scripts (in blau).
Das Skript ist möglichst übersichtlich geschrieben, d.h. Variablen werden nacheinander angelegt, Vorabtests durchgeführt, die if-Abfragen nicht in abgekürzter Form gestaltet und die Textausgaben über Variablen gesteuert. Etliches könnte auch kürzer geschrieben werden (z.B. auch mit switch-case-Schleifen, die aber unter NN4 nicht laufen), aber in der vorliegenden Form ist das Skript vielleicht am besten nachvollziehbar. Außerdem sollte die Fehlerausgabe erst beim Abschickversuch erfolgen und über ein alert-Fenster ausgegeben werden. Wer bessere, v.a. kürzere und dennoch übersichtliche Lösungsmöglichkeiten findet, möge diese doch bitte schicken. Vielen Dank.
Skript im Header:
/*dieses Skript kann frei verwendet werden, sofern dieser Eintrag nicht geloescht wird. Ggf. weiter unten vorhandene Kommentare
koennen geloescht werden. © R. Leinfelder, online-Multimediakurs, Palaeontologie Muenchen, 2002. www.palaeo.de/multimediakurs
Evtl. unten geloeschte Skripterlaeuterungen finden Sie im Originalbeispiel unter Kursmodul 7/Anhang. */
function testen()
{
//wir richten die vier Variablen ein, deren Werte später durch die Formulareingaben zugeordnet werden.
var name, plz, telnr, email;
//nachfolgend Variableneinrichtung, die wir für die Fehlermeldungen benötigen. Später werden ihnen Textstrings als Werte zugeordnet.
var namefalsch, vornamefehlt, plzlaengefalsch, plzzahlenfalsch, telnrfehlt, telnrfalsch, emailfehlt, emailfalsch, emailatfehlt;
//nachfolgend Variablen, denen wir später Textstrings für die Fehlerausgabe zuordnen. Die Variable nix bekommt einen leeren Inhalt.
var a, b, c, d, nix="";
//dies sind Hilfsvariablen, die wir für entsprechende Tests in den Abfragen brauchen. Wir verwenden sie, um den Schleifencode abzukürzen (s.u.)
var vorname, plztest, emailtest;
//nun die Wertezuordnung für die oben eingerichteten Fehlervariablen als Texstrings.
//Umlaute müssen im hexadezimalcode codiert werden. Hinweis: dies funktioniert nicht korrekt im NN 4.x
//da in der Ausgabe später etliche dieser Textstrings aneinandergehängt werden, produzieren wir noch einen
//Zeilenumbruch mit dem entsprechenden unescape-Zeichen \n.
namefehlt="Sie haben Ihren Namen nicht eingegeben!\n";
vornamefehlt="Sie m"+unescape('%FC')+ "ssen Vor- und Nachnamen eingeben!\n";
plzfehlt="Geben Sie Ihre Postleitzahl ein\n";
plzlaengefalsch="Postleitzahlen m" + unescape('%FC') + "ssen 5 Ziffern haben!\n";
plzzahlenfalsch="Postleitzahlen m" + unescape('%FC') + "ssen aus Zahlen bestehen!\n";
telnrfehlt="Geben Sie Ihre Telefonnummer an!\n";
telnrfalsch="Bei Telefonnummern nur Zahlen sowie evtl. () - / verwenden!\n";
emailfehlt="Bitte Emailadresse angeben!\n";
emailfalsch="Keine g" + unescape('%FC')+"ltige Email-Adresse!\n";
emailatfehlt="In Ihrer Emailadresse fehlt das @-Zeichen!\n";
emailpunktfehlt="Emailadressen m"+unescape('%FC')+ "ssen Punkte enthalten!";
//nun werden die nachstehenden vier Variablen miti den Werten der Eingabefelder belegt. Diese Eingaben sollen dann getestet werden.
//im Unterschied zu früheren Beispielen sprechen wir unser Formular und unsere Formularfelder dieses Mal nicht via array-Indexnummern,
//sondern via Elementnamen an. Unser Formular nennt sich formDaten, die Eingabefelder textNutzer, textPLZ etc.
//vgl. Sie mit dem Code im Body
name=window.document.formDaten.textNutzer.value;
plz=window.document.formDaten.textPLZ.value;
telnr=window.document.formDaten.textTel.value;
email=window.document.formDaten.textEmail.value;
//nun generieren wir via Methoden bzw. Eigenschaften Werte für einige Variablen:
//die Variable vorname erhält durch die indexOf-Methode den Wert -1, falls kein Leerzeichen im Namen ist.
vorname=name.indexOf(" ");
//die Variable plztest erhält durch die isNaN-Methode den Wert true falls, der Wert der Variablen plz keine Zahl darstellt
plztest=isNaN(plz);
//wir definieren weitere Variablen. Telzeichen bekommt als Wert alle für Telefonnummereingaben zulässigen Zeichen.
//Daneben definieren wir die Hilfsvariablen x, y, und tellaenge, die wir für den TEst der Tel-Nr. eingabe benötigen.
//tellaenge bekommt als Wert die Anzahl der Zeichen der eingegebenen Tel.-Nr.
var telzeichen="0123456789/-() ", x, y, tellaenge;
tellaenge=telnr.length;
//nun analog weitere Variablen zumTest der Emaileingabe. Die Emaileingabe soll zudem in Kleinbuchstaben umgewandelt
// werden, ansonsten müssten wir unter emailzeichen auch Grossbuchstaben eingeben.
var emailzeichen="0123456789abcdefghijklmnopqrstuvwxyz@-.", e, f, elaenge;
email=email.toLowerCase();
elaenge=email.length;
//die nachfolgende Variablendefinition sucht nach dem Zeichen @ in der Emailadresse. Wird es nicht gefunden, ist der Variablenwert -1
var emailat=email.indexOf("@");
//hier wird analog noch nach einem Email-Punkt gesucht.
var emailpunkt=email.indexOf(".");
//nun beginnen die if-Abfragen. Da wir erst am Schluss aller Abfragen nur eine gemeinsame Fehlermeldung bzw. ein ok geben wollen,
//müssen wir das ganze von einer Komplettumfrage einschließen lassen. Die erste if-Abfrage lässt quasi sämtliche Fälle zu, damit danach in die einzelnen Tests aufgegliedert werden kann.
if (name=="" || name!="" || plz=="" || plz!="" || telnr=="" || telnr!="" || email=="" || email!="")
/* Die nachfolgende If-Abfrage sollte mit dem Kursvorwissen selbsterklärend sein. Zum Eingabetest des Namensfeldes
werden zwei verschachtelte if-Abfragen verwendet. Wird ein Fehler gefunden, wird der Variablen a
ein spezieller Textstring, wiederum abgekürzt als Variable zugeordnet. Am Ende der Abfrage wird nur einmal a definiert. War alles bei der Namenseingabe richtig, erhält a den Wert der Variablen nix, welche keinen Wert hat. Falls kein Leerzeichen im Namen gefunden wird, wird davon ausgegangen, dass der Vorname fehlt. */
{
if (name=="")
{
a=namefehlt;
}
else
{
if (vorname ==-1)
{
a=vornamefehlt;
}
else
{
a=nix;
}
}
/*analog oben wird nun mit drei verschachtelten If-Abfragen auf Richtigkeit der Eingabe der Postleitzahl getestet. Geprüft wird
auf Vorhandensein einer Eingabe, auf Eingabe von nur Zahlen, sowie auf die Eingabelänge 5. Bei falscher Eingabe wird der
Variablen b der Wert einer anderen Variablen, d.h. ein Fehlertextstring zugeordnet. Ist alle richtig, bekommt b ebenfalls den Wert
der Variablen nix*/
if (plz=="")
{
b=plzfehlt;
}
else
{
if(plztest==true)
{
b=plzzahlenfalsch;
}
else
{
if(plz.length!=5)
{
b=plzlaengefalsch;
}
else
{
b=nix;
}
}
}
/* mit zwei verschachtelten if-Abfragen wird nun die Eingabe der Tel-Nummer getestet. Getestet wird auf Fehlen der Eingabe sowie
auf Zulässigkeit der eingegebenen Zeichen. Für letzteres muss eine for-Schleife verwendet werden, bei der für jede Zeichenstelle
auf Richtigkeit geprüft wird, bis also die Variable x, die bei jedem Schleifendurchgang hochgezählt wird eins kleiner als die Länge
der Eingabe ist (da ja das erste Zeichen die Position 0 hat). Wie oben, wird die Variable c je nach Ergebnis mit dem Wert einer
Textstringvariablen belegt oder der Variablen nix zugeordnet.*/
if (telnr=="")
{
c=telnrfehlt;
}
else
{
for (x=0; x< tellaenge; x++)
{
y=telnr.charAt(x);
if (telzeichen.indexOf(y)==-1)
{
c=telnrfalsch;
break;
}
else
{
c=nix;
}
}
}
}
/* nun noch die Abfrage auf richtige Eingabe der Email-Adresse, wofür wir gleich fünf verschachtelte if-Abfragen verwenden.
Abgefragt wird nach: fehlender Eingabe, unzulässigen Zeichen mittels for-Schleife, fehldendem @-Zeichen, fehlendem Punkt und
zu kurzer Länge der Eingabe. Je nach Ergebnis wird analog oben der Variablen d eine Textstringvariable als Wert zugeordnet oder aber d mit dem Variablenwert von nix belegt.*/
if (email=="")
{
d=emailfehlt;
}
else
{
for (e=0; e < elaenge; e++)
{
f=email.charAt(e);
if (emailzeichen.indexOf(f)==-1)
{
d=emailfalsch;
break;
}
else
{
if (emailat==-1)
{
d=emailatfehlt;
}
else
{
if (emailpunkt==-1)
{
d=emailpunktfehlt;
}
else
{
if (elaenge<6)
{
d=emailfalsch;
}
else
{
d=nix;
}
}
}
}
}
}
/*hier verlassen wir nun die Fehlerabfragen. Je nach Testergebnis wurden die Variablen a-d ja mit unterschiedlichen Werten belegt.
Sind alle Tests ohne Fehler abgelaufen, haben a-d ja den Wert der Variablen nix angenommen. In diesem Fall gibt es ein
Danke-Fensterchen, in dem auch noch die Variable name mit ausgegeben wird. Durch Return true werden dann die Eingaben
auch wirklich abgeschickt (in unserem Fall allerdings nicht, da im Formular weder URL noch Methode angegeben wurde).
Hat aber nur eine Variable von a-b einen Wert ungleich nix, wird die else-Option durchgeführt und in einem Alert-Fenster diese
Variablenwerte ausgegeben. Nun sehen Sie auch, warum die Fehler-Textstrings das neue-Zeilen-Zeichen beinhalten. Haben einige
der auszugebenden Variablen den Wert von nix zugeordnet bekommen, ist dieser Wert ja "", d.h. es wird nichts dargestellt. So
erreichen, wir dass nur die Fehlermeldungen ausgegeben werden.
Return false ist aus zwei Gründen notwendig: zum einen wird das Formular so nicht abgeschickt, zum anderen bleibt dadurch die
Eingabe stehen und kann korrigiert werden.*/
if (a==nix && b==nix && c==nix && d==nix)
{
window.alert("Vielen Dank, " + name + ". \n Ihre Angaben wurden abgeschickt!");
return true;
}
else
{
window.alert(a + b + c + d);
return false;
}
}
HIer ist das Head-Skript zu Ende.
Wichtig: Im Body wird die Funktion testen() mit einem onclick-Eventhandler für den Submit-Button aufgerufen (sehen Sie in den Sourcecode). Dieser Handler nennt sich aber nicht "onclick=testen()", sondern "onclick=return testen()" Dies ist wichtig und bedeutet, dass die Eingaben nicht eingeschickt werden, falls aus dem Skript return false zurückgegeben wird. Nur falls return true zurückgegeben wird, werden die Eingaben auch wirklich abgeschickt.