1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Anwendungsbeispiele / Formulareingaben berprfen</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript Eingaben in einem Formular berprfen knnen, bevor das Formular abgesendet wird.">
<meta name="keywords" content="SELFHTML, JavaScript, Formular, Eingabeprfung, Formular-Check">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Mnz">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/formulareingaben.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Dynamische grafische Buttons" href="buttons.htm">
<link rel="prev" title="Persnliche Seitenbesuche zhlen mit Cookies" href="seitenbesuche.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Formulareingaben berprfen</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/formulareingaben.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>Wenn Sie HTML-basierte <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../html/formulare/index.htm">Formulare</a> im WWW anbieten, kann jeder Anwender irgendeinen Unsinn in das Formular schreiben und es dann abschicken. Betroffen davon sind vor allem Eingabefelder. Dadurch erhalten Sie berflssige E-Mails, oder ein <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../perl/index.htm">Perl</a>-Script, das die Formulareingaben automatisch verarbeitet, speichert leere oder nutzlose Daten ab. Mit Hilfe von JavaScript knnen Sie Formulareingaben berprfen, bevor das Formular abgeschickt wird. Bei fehlenden oder offensichtlich fehlerhaften Eingaben knnen Sie das Absenden des Formulars verhindern.</p>
<p>Das Beispiel auf dieser Seite zeigt, wie eine solche berprfung im Prinzip funktioniert. Je nachdem, was Ihr Formular enthlt, mssen Sie das Beispiel natrlich erweitern.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>Das Beispiel zeigt die vollstndige HTML-Datei mit dem Formular und dem JavaScript zum berprfen der Formulareingaben. Das Beispielformular ruft nach erfolgreichem Absenden ein CGI-Script auf dem Server von <var>aktuell.de.selfhtml.org</var> auf.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/formulareingaben.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head>
<title>Formulareingaben &uuml;berpr&uuml;fen</title>
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Bitte Ihren Namen eingeben!");
document.Formular.User.focus();
return false;
}
if (document.Formular.Ort.value == "") {
alert("Bitte Ihren Wohnort eingeben!");
document.Formular.Ort.focus();
return false;
}
if (document.Formular.Mail.value == "") {
alert("Bitte Ihre E-Mail-Adresse eingeben!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("@") == -1) {
alert("Keine E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Bitte Ihr Alter eingeben!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Altersangabe keine Zahl!");
document.Formular.Alter.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Formular</h1>
<form name="Formular" action="http://de.selfhtml.org/cgi-bin/formview.pl"
method="post" onsubmit="return chkFormular()">
<pre>
Name: <input type="text" size="40" name="User">
Wohnort: <input type="text" size="40" name="Ort">
E-Mail: <input type="text" size="40" name="Mail">
Alter: <input type="text" size="40" name="Alter">
Formular: <input type="submit" value="Absenden"><input type="reset" value="Abbrechen">
Zum Absenden muss eine Internet-Verbindung bestehen!
</pre>
</form>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Formular definieren:</h4>
<p>Im Beispiel wird ein gewhnliches HTML-Formular mit einigen Eingabefeldern, einem Rest-Button zum Zurcksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Die einzige Besonderheit ist die Anweisung <code>onsubmit="return chkFormular()"</code> im einleitenden <code><form></code>-Tag. Der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handler</a> <code>onsubmit</code> wird aktiv, wenn der Anwender auf den Submit-Button klickt, um das Formular abzusenden. Dann wird die JavaScript-Funktion <code>chkFormular()</code> aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist. Wenn die Funktion Fehler bei den Eingaben findet, gibt sie den Wert <code>false</code> (<i>falsch</i>) zurck, ansonsten den voreingestellten Wert <code>true</code> (<i>wahr</i>). Mit <code>return</code> wird dieser Wert im einleitenden <code><form></code>-Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte <code>true</code> und <code>false</code>. Im Zusammenhang mit <code>onsubmit</code> reagiert er so, dass er das Formular nur dann abschickt, wenn der Wert <code>true</code> ist. Ist der Wert <code>false</code>, wird das Absenden der Formulardaten verhindert.</p>
<h4>Formular berprfen:</h4>
<p>Die eigentliche Formularberprfung findet im Beispiel in der Funktion <code>chkFormular()</code> statt, die in dem Script-Bereich im Dateikopf notiert ist. Im Beispiel soll jedes Eingabefeld daraufhin berprft werden, ob es einen Inhalt hat, d.h. ob der Anwender es ausgefllt hat. Bei der Angabe zur E-Mail-Adresse soll zustzlich berprft werden, ob in der Eingabe das Zeichen @ vorkommt. Ist das nicht der Fall, kann man davon ausgehen, dass der Anwender Unsinn eingegeben hat in dem entsprechenden Feld. Bei der Altersangabe schlielich soll zustzlich berprft werden, ob die Eingabe eine positive ganze Zahl ist. Andernfalls muss man auch hierbei eine unsinnigen Angabe vermuten.</p>
<p>Mit einer Abfrage wie <code>if (document.Formular.User.value == "")</code> wird ermittelt, ob das entsprechende Formularfeld (im Beispiel also das Feld mit dem Namen <code>User</code> im Formular mit dem Namen <code>Formular</code>) berhaupt einen Inhalt hat. Es wird also auf die leere Zeichenkette <code>""</code> hin geprft.</p>
<p>Mit einer Abfrage wie <code>if (document.Formular.Mail.value.indexOf('@') == -1)</code> wird ermittelt, ob in der Eingabe ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das fr E-Mail-Adressen charakteristisch ist).</p>
<p>Mit einem Ausdruck wie:<br>
<code>for (i = 0; i < document.Formular.Alter.value.length; ++i)<br>
if (document.Formular.Alter.value.charAt(i) < "0" ||<br>
document.Formular.Alter.value.charAt(i) > "9")</code><br>
ermitteln Sie Zeichen fr Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthlt. Wenn ja, wird im Beispiel eine Merkvariable namens <code>chkZ</code> auf den Wert <code>-1</code> gesetzt.</p>
<p>Bei allen Abfragen dieser Art werden jeweils drei Anweisungen ausgefhrt, wenn die Anwendereingaben der Prfung nicht standhalten. Zuerst wird mit <code>alert()</code> jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat. In der zweiten Anweisung wird mit der <code>focus()</code>-Methode auf das Formularelement positioniert, auf das sich der Fehler bezieht. Der Anwender kann seine Feldeingabe also gleich korrigieren. Die dritte Anweisung schlielich gibt <code>false</code> zurck. Dadurch wird das Absenden des Formulars verhindert.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="buttons.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="buttons.htm">Dynamische grafische Buttons</a>
</td></tr>
<tr>
<td class="doc"><a href="seitenbesuche.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="seitenbesuche.htm">Persnliche Seitenbesuche zhlen mit Cookies</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2005 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
