Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Rheinwerk Computing

9.7 Überprüfungsfunktionen  downtop

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.


Rheinwerk Computing

9.7.1 Ganze Zahlenwerte  downtop

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;
}

Rheinwerk Computing

9.7.2 Dezimalzahlen  downtop

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;
}

Rheinwerk Computing

9.7.3 Telefonnummern  downtop

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:

gp  (0123) 456789
gp  (01 23) 45 67 – 89
gp  01234/456789
gp  +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;
}

Rheinwerk Computing

9.7.4 E-Mail-Adressen  downtop

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;
      }
   }
}

Rheinwerk Computing

9.7.5 In Zahlenwerte umwandeln  toptop

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
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern