JavaScript Form Beispiel 9: Input Check - Ganze Zahlen (Integer)

Bei der Eingabe von Zahlen, die durch den auf einer Internetseite genutzten JavaScript-Code im Rahmen von clientseitigen Berechnungsfunktionen weiterverarbeitet oder zur weiteren Verarbeitung an den Webserver versendet werden sollen kann schon im Vorfeld nach der Eingabe durch den Benutzer geprüft werden, ob es sich um korrekte Zahlen handelt. An dieser Stelle werden zwei JavaScript Funktionen vorgestellt, die eine derartige Prüfung vornehmen.

Die erste der beiden Funktionen wird im folgenden Beispiel demonstriert. Im unteren Script-Code wird dazu ein Formular definiert, das wiederum aus einem Textfeld und einem Button, der die Eingabeprüfung einleitet, besteht. Hier wird das onClick-Event verwendet, welches mit dem Event-Handler isInteger – der Prüffunktion – verbunden wird. Nähere Informationen zum Thema JavaScript und den verfügbaren Benutzerereignissen finden Sie unter Event.

Per getElementById(), der JavaScript-Methode zur Ermittlung eines HTML-Elementobjekts über dessen Element-ID, wird das zur Eingabeprüfung vorgesehene Element an die Prüffunktion übergeben. GetElementById ist aber nur eine der Methoden des Document-Object die dazu verwendet werden kann, Elemente aus dem HTML-Elementenbaum zu extrahieren. Der zweite Parameter der Funktion dient auch hier wieder der Übergabe einer individuellen Fehlermeldung, die ausgegeben wird, wenn das Eingabefeld keinen gültigen Ganzzahlwert enthält. Wird hier kein Wert vom Typ String angegeben, so gibt die Funktion auch keine Fehlermeldung aus und quittiert lediglich mit dem Prüfergebnis (TRUE, wenn die Eingabe eine ganze Zahl enthält; ansonsten FALSE).

Die Funktion isInteger funktioniert ähnlich wie die bereits auf den vorherigen Seiten beschriebenen Prüffunktionen. Mit Hilfe des regulären Ausdrucks im Aufruf der Methode match wird das Eingabestring auf Zeichenfolgen geprüft, die einen gültigen ganzzahligen Wert vom Typ Integer ergeben.

<form>
  Ganze Zahl <input id="zahl" name="zahl" type="text" /> <input type="button" onclick="isInteger (document.getElementById ('zahl'), '')" value="Test auf ganze Zahl" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Mit der Funktion isInteger kann geprüft werden, ob die in einem Eingabefeld getätigte
// Eingabe eine ganze Zahl ist. Als erster Parameter wird hierzu das Eingabeelement angegeben.
// Der zweite Parameter ist optional und kann eine Fehlermeldung enthalten die angezeigt wird,
// wenn die Eingabe keinen Integerwert enthält. Wird hier ein Leerstring ("") angegeben, so
// gibt die Alert-Box zur Ausgabe der Fehlermeldung eine Standardmeldung aus.
// Zurück liefert die Funktion TRUE für den Fall, dass die Eingabe eine ganze Zahl enhält.
// Anderenfalls wird FALSE als Return-Wert geliefert und der Focus wird wieder zurück auf das
// Input-Element gesetzt.
function isInteger (element, errMsg) {
  if (element && typeof element == 'object' && element.nodeType == 1 && element.type == 'text') {
    // Prüfen, ob alle Zeichen im Eingabefeld Ziffern sind (mindestens eine muss enthalten sein)
    if (!element.value.match (/^[+-]?[0-9]+$/)) {
      if (typeof errMsg == 'string')
        if (errMsg.length != 0)
          alert (errMsg);
        else
          alert ('Feld ' + element.name + ' enth\u00e4lt keine ganze Zahl!');
      element.focus ();
      return false;
    }
    return true;
  }
  alert ('Angegebenes Element ist nicht vom Typ text!');
}
// -->
</script>

JavaScript Form Beispiel 10: Gleitkommazahlen (Float)

Ähnlich, wie die zuvor beschriebene Funktion isInteger hat die Funktion isReal die Aufgabe gültige Gleitkommazahlen in Eingabefeldern als solche zu erkennen. Das nächste Formular ist ebenso aufgebaut, wie das aus dem letzten Beispiel. Der hier definierte Button wird wieder mit dem onClick-Event verbunden und das Eingabefeld – wiederum per DOM-Methode getElementById() ermittelt – wird an die Prüffunktion übergeben.

Auch das Beispiel zur Prüfung auf eine gültige Gleitkommazahl nutzt in der entsprechenden If-Anweisung wieder die Match-Methode zur Prüfung der Eingabedaten. Anders als bei der Funktion isInteger akzeptiert der reguläre Ausdruck hier allerdings Gleitkommazahlen in einem beliebigen Eingabeformat – hier wird der Dezimalpunkt genutzt; sollen Eingaben mit einem Komma als Dezimaltrenner akzeptiert werden, so muss in den regulären Ausdrücken das Kommazeichen anstelle des Punkts gesetzt werden. Fehler bei der Eingabe von Gleitkommazahlen werden auch hier wieder in einer Alert-Box angezeigt, wenn der Paramter errMsg an die Funktion isReal übergeben wird und dieser ein String enthält. Beachten Sie auch die Beispiele zu den anderen durch das Window-Object nutzbaren Dialogboxen.

<form>
  Gleitkommazahl <input id="gleitkomma" name="gleitkomma" type="text" /> <input type="button" onclick="isFloat (document.getElementById ('gleitkomma'), '')" value="Test auf Gleitkommazahl" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Die Funktion isFloat entscheidet, ob die in einem Input-Feld angegebene Zeichenkette einen
// Gleitkommawert (float) enthält. Als ersten Parameter muss der Funktion das HTML-Elementobjekt
// übergeben werden (ein Input-Element mit dem Typ text). Im optionalen zweiten Parameter kann
// eine Fehlermeldung angegeben werden. Diese wird in einer Alert-Box angezeigt, wenn der
// Eingabewert keine Gleitkommazahl ist. Als Rückgabewert wird TRUE geliefert, wenn die Eingabe
// einen Float-Wert enthält. Ist dies nicht der Fall, so wird FALSE zurückgeliefert.
function isFloat (element, errMsg) {
  if (element && typeof element == 'object' && element.nodeType == 1 && element.type == 'text') {
    var eingabe = element.value;
    // Ist die Eingabe eine Gleitkommazahl? (hier wird ein Dezimalpunkt verwendet)
    if (!eingabe.match (/^[+-]?[0-9]*[.][0-9]+$/) && !eingabe.match (/^[+-]?[0-9]+[.][0-9]*$/)) {
      if (typeof errMsg == 'string')
        if (errMsg.length != 0)
          alert (errMsg);
        else
          alert ('Feld ' + element.name + ' enth\u00e4lt keinen Gleitkommawert!');
      element.focus ();
      return false;
    }
    return true;
  }
  alert ('Eingabeelement ist nicht vom Typ text!');
}
// -->
</script>

« zurück zu Seite 1 2 3 4 5 6 7 weiter zu Seite 9 »