Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 9 Formulare
|  | 9.1 Überprüfung auf Vollständigkeit
|  |  | 9.1.1 Allgemeiner Aufbau
|  |  | 9.1.2 Texteingabefelder
|  |  | 9.1.3 Radiobuttons
|  |  | 9.1.4 Checkboxen
|  |  | 9.1.5 Auswahllisten
|  |  | 9.1.6 Fehlermeldung ausgeben
|  |  | 9.1.7 Konstruktive Vorschläge
|  | 9.2 Automatische Überprüfung
|  |  | 9.2.1 Texteingabefelder
|  |  | 9.2.2 Radiobuttons
|  |  | 9.2.3 Checkboxen
|  |  | 9.2.4 Auswahllisten
|  |  | 9.2.5 Zusammenfassung
|  | 9.3 Anwendungsmöglichkeiten für Formulare
|  |  | 9.3.1 Währungsrechner
|  |  | 9.3.2 Währungsrechner, Teil 2
|  |  | 9.3.3 Formularfelder für die Textausgabe nutzen
|  |  | 9.3.4 Navigation mit Auswahllisten
|  | 9.4 Anwendungsbeispiel: Fensteroptionen
|  | 9.5 Daten behalten
|  |  | 9.5.1 Das Eingabeformular
|  |  | 9.5.2 Die Ausgabeseite
|  | 9.6 Dynamische Auswahllisten
|  |  | 9.6.1 Ein erster Ansatz
|  |  | 9.6.2 Ein fortgeschrittener Ansatz
|  | 9.7 Überprüfungsfunktionen
|  |  | 9.7.1 Ganze Zahlenwerte
|  |  | 9.7.2 Dezimalzahlen
|  |  | 9.7.3 Telefonnummern
|  |  | 9.7.4 E-Mail-Adressen
|  |  | 9.7.5 In Zahlenwerte umwandeln
|  | 9.8 Reguläre Ausdrücke
|  |  | 9.8.1 Kurzeinführung
|  |  | 9.8.2 Ein Objekt erzeugen
|  |  | 9.8.3 Mit dem Objekt arbeiten
## 9.7 Überprüfungsfunktionen In Kapitel 8 wurden Formulare auf Vollständigkeit überprüft. In der Praxis gibt es jedoch noch weitere Anforderungen. Manche Eingabefelder verlangen besondere Eingaben, beispielsweise Postleitzahlen, Telefonnummern oder Uhrzeiten. In diesem Abschnitt werden einige Funktionen aus diesem Bereich entwickelt. ### 9.7.1 Ganze Zahlenwerte In JavaScript gibt es die Funktion isNaN(), die feststellt, ob ein Eingabewert keine Zahl ist. Aus Gründen der Flexibilität könnte man aber auch auf die Idee kommen, diese Funktion selbst zu programmieren. Der Eingabewert wird dazu als Zeichenkette betrachtet, und bei jedem Zeichen wird überprüft, ob es eine Ziffer von 0 bis 9 ist. Sollte das für alle Zeichen zutreffen, handelt es sich um eine Zahl, ansonsten liegt keine Zahl vor. Wir haben eine derartige Funktion schon im vorigen Kapitel verwendet, hier nun noch einmal zur Wiederholung:
    function isANumber(n) {
       var s = "" + n; //Umwandlung in eine Zeichenkette
       var ziffern = "0123456789";  //Gültige Zeichen
       for (var i=0; i<s.length; i++) {
          if (ziffern.indexOf(s.charAt(i)) == –1) {
          //keine Ziffer
             return false;
          }
       }
       return true;
    }
Mit dieser Methode kann man beispielsweise überprüfen, ob ein Eingabewert eine deutsche Postleitzahl darstellen könnte:
    if (eingabe.length==5 && isANumber(eingabe))
Streng genommen sind aber nicht alle Postleitzahlen natürliche Zahlen, so beispielsweise 01234. Das ist die Postleitzahl einiger Postfächer in Dresden, aber keine natürliche Zahl, da sie mit 0 beginnt, was nicht sein darf (Ausnahme: die Null selbst). Für streng numerische Eingaben (beispielsweise für ein Anzahl-Feld in einem Bestellformular) muss man die Funktion folgendermaßen umschreiben:
    function isANumber2(n) {
       var s = "" + n;  //Umwandlung in eine Zeichenkette
       var ziffern = "0123456789";  //Gültige Zeichen
       if (s == "0") { //Bei "0"
          return true;
       }
       if (s.charAt(0) == "0") { //Bei 0 am Anfang
          return false;
       }
       for (var i=0; i<s.length; i++) {
          if (ziffern.indexOf(s.charAt(i)) == –1) {
          //keine Ziffer
             return false;
          }
       }
       return true;
    }
Im dritten Schritt soll noch die zusätzliche Funktionalität implementiert werden, dass auch negative Zahlen erkannt werden, beispielsweise »-42«. Die Überprüfung gestaltet sich jedoch sehr einfach. Ist das erste Zeichen ein Minus, wird es einfach abgetrennt. Hinter dem Minuszeichen dürfen nur noch Ziffern stehen, also bleibt alles wie gehabt.
    function isANumber3(n) {
       var s = "" + n;  //Umwandlung in eine Zeichenkette
       var ziffern = "0123456789":  //Gültige Zeichen
       if (s.charAt(0) == "-") { //führendes Minus entfernen
          s = s.substring(1, s.length);
       }
       if (s=="0") { //Bei "0"
          return true;
       }
       if (s.charAt(0) == "0") { //Bei 0 am Anfang
          return false;
       }
       for (var i=0; i<s.length; i++) {
          if (ziffern.indexOf(s.charAt(i)) == –1) {
          //keine Ziffer
             return false;
          }
       }
       return true;
    }
### 9.7.2 Dezimalzahlen Das Überprüfen von Dezimalzahlen ist schon eine etwas anspruchsvollere Aufgabe. Zum einen gibt es den Unterschied zwischen der deutschen und der amerikanischen Schreibweise: Während man in Deutschland den Ganzzahlanteil vom Dezimalteil durch ein Komma trennt, verwendet man in Amerika einen Punkt. JavaScript benötigt für Rechnungen die amerikanische Notation, so dass als Allererstes in einer Überprüfungsfunktion alle Kommata durch Punkte ersetzt werden. Zum anderen darf in der vermeintlichen Dezimalzahl maximal ein Punkt (bzw. Komma) vorkommen.
    function isAFract(n) {
       var s = "" + n;  //Umwandlung in String
       while (s.indexOf(",") > –1) { //Kommata durch Punkte ersetzen
          s = s.substring(0, s.indexOf(",")) + "." +
             s.substring(s.indexOf(",") + 1, s.length)
       }
       var anzahl_punkt = 0;  //Variable zum Zählen der Dezimalpunkte
       for (var i=0; i<s.length; i++) {
          if (s.charAt(i) == ".") {
             anzahl_punkt++;
          }
       }
       if (anzahl_punkt > 1) { //Mehr als ein Dezimalpunkt?
          return false;
       }
       // *** Eigentliche Überprüfung nach obigem Muster
       // *** Neu: Der Dezimalpunkt ist ein erlaubtes Zeichen
       var ziffern = ".0123456789";  //Gültige Zeichen
       if (s.charAt(0) == "-") { //Führendes Minus entfernen
          s = s.substring(1, s.length);
       }
       if (s == "0") { //Bei "0"
          return true;
       }
       if (s.charAt(0) == "0" && s.charAt(1) != ".") {
          //Bei 0 am Anfang ohne folgenden Punkt
          return false,
       }
       for (var i=0; i<s.length; i++) {
          if (ziffern.indexOf(s.charAt(i)) == –1) {
          //Keine Ziffer
             return false;
          }
       }
       return true;
    }
### 9.7.3 Telefonnummern Es gibt viele Möglichkeiten, eine Telefonnummer zu schreiben. Eine Telefonnummer mit der Vorwahl 0123 und der Rufnummer 456789 kann beispielsweise folgendermaßen geschrieben werden:
| (0123) 456789
| (01 23) 45 67 – 89
| 01234/456789
| +49[0]123 – 456789
Zwar können Sie für jeden dieser Fälle eine eigene Überprüfungsfunktion schreiben, aber es ist effizienter, einfach eine Liste der wahrscheinlich vorkommenden Zeichen zu erstellen und darauf zu überprüfen. Eine mögliche Validierungsfunktion kann dann so aussehen:
    function isAPhoneNumber(n) {
       var s = "" + n;  //Umwandlung in eine Zeichenkette
       var zeichen = "0123456789+-()[]/ ";  //Gültige Zeichen
       for (var i=0; i<s.length; i++) {
          if (zeichen.indexOf(s.charAt(i)) == –1) {
             //kein gültiges Zeichen
             return false;
          }
       }
       return true;
    }
### 9.7.4 E-Mail-Adressen Die Überprüfung von E-Mail-Adressen ist eine klassische Anwendung im Web – aber meiner Meinung nach etwas überbewertet: Allerorten findet man mehr oder minder komplexe Überprüfungsfunktionen für E-Mail-Adressen, doch die meisten haben einige erhebliche Nachteile: Oftmals nämlich werden gültige E-Mail-Adressen abgewiesen, wenn sie seltene, aber gültige Zeichen enthalten. »Klassiker« sind beispielsweise das Plus-Zeichen im Teil vor dem Klammeraffen oder seit einiger Zeit Umlaute und andere Sonderzeichen im Domainnamen. Absichtliche Falscheingaben eines Nutzers können Sie eh nicht abfangen; unabsichtliche dagegen häufig schon. Prüfen Sie deswegen nur das Nötigste. Wie wäre es etwa, wenn Sie bei Mailadressen lediglich nachsehen, ob es darin einen Klammeraffen und nach diesem irgendwo einen Punkt gibt?
    function isEmail(n) {
       var klammeraffe = s.indexOf("@");
       if (klammeraffe < 1) {
          return false;
       } else {
          var punkt = s.substring(klammeraffe).indexOf(".");
          if (punkt < 2) {
             return false;
          } else {
             return true;
          }
       }
    }
### 9.7.5 In Zahlenwerte umwandeln Wenn man mit Formularen rechnet, ist es oft nicht nur wichtig, Formulareingaben auf numerische Werte zu überprüfen, sondern auch, diese numerischen Werte zu erhalten. Zwar gibt es die Funktionen parseFloat ("Zeichenkette") für Dezimalzahlen und parseInt("Zeichenkette") für ganze Zahlen, aber diese liefern gegebenenfalls ein NaN-Objekt zurück: Not A Number. Zur Überprüfung des Rückgabewerts von parseFloat() und parseInt() würde man die Funktion isNaN() benötigen, und diese hat ja die eingangs erläuterten Nachteile. Außerdem funktioniert parseFloat() nur mit amerikanisch formatierten Eingabewerten, also mit einem Dezimalpunkt statt einem Dezimalkomma. Im Folgenden soll eine neue Funktion programmiert werden, die der Funktion eval() ähnelt, einen Eingabewert überprüft und einen numerischen Wert zurückgibt. Ist der Eingabewert kein korrekt formatierter Zahlenwert, so wird 0 zurückgegeben. Das hat den Vorteil, dass mit Formularen sehr bequem gerechnet werden kann, da hier oft multipliziert wird (etwa Stückzahl mal Preis). Ist ein Eingabewert eine leere Zeichenkette oder allgemein keine Zahl, so wird 0 zurückgegeben, und das Ergebnis der Multiplikation ist auch 0. Die im Folgenden aufgeführte Funktion benutzt eine bereits zuvor entwickelte Funktion, so dass Sie auf eine konsistente Namensgebung achten müssen.
    function smartEval(n) {
       var s = "" + n;  //Umwandlung in eine Zeichenkette
       for (var i=0; i<s.length; i++) { //Kommata in Zahlen
          if (s.charAt(i) == ",") {

             s = s.substring(0, i) + "." + s.substring(
                i+1, s.length);
          }
       }
       if (isAFrac(s)) {
          return 1*s;  //Umwandlung in einen Zahlenwert
       } else {
          return 0;
       }
    }
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de