JavaScript Form Beispiel 11: Eingegebene EMail-Adresse prüfen

Auf dieser Seite finden Sie Beispiele zur Prüfung von Eingaben auf gültige EMail-Adressen und URLs. Derartige Eingaben werden in vielen Formularen benötigt – sei es zur Eingabe einer Mail-Adresse zur Anmeldung für einen Newsletter oder zur Angabe der eigenen Internetseite in einem Kontaktformular.

Das im Beispiel unten definierte Formular zeigt, wie Sie die Funktion zur Prüfung auf eine gültige EMail-Adresse nutzen können. Hier wird wieder das onClick-Event mit einer Event-Handler-Funktion verbunden. Tritt dieses Event auf (nachdem der Benutzer auf den Button geklickt und damit dieses Event ausgelöst hat), dann wird die Prüffunktion isEmail automatisch mit entsprechenden Parametern aufgerufen.

Die JavaScript Function isEmail erwartet mindestens einen Parameter. Dieser Parameter gibt das Input-Elementobjekt an, dessen Eingabedaten auf Vorhandensein einer gültigen EMail-Adresse prüfen soll. Das zu verwendende HTML-Elementobjekt wird mit getElementById() aus dem Elementenbaum des aktuellen HTML-Dokuments über seine Element-ID ermittelt. Neben getElementById bietet das Document-Object mit den Methoden getElementsByTagName und getElementsByName weitere Möglichkeiten einzelne Elemente aus dem HTML-Dokument zu adressieren. Siehe hierzu auch die Ausführungen zum Document Object Model (DOM).

Der zweite Parmeter der Funktion ist optional und gibt eine Zeichenkette an, die eine im Fehlerfall auszugebende individuelle Fehlermeldung enhält. Wird hier kein String angegeben, so gibt die Funktion lediglich TRUE zurück, wenn die EMail-Adresse korrekt ist – bzw. FALSE falls dies nicht der Fall ist. Es erfolgt also keine direkte Rückmeldung an den Benutzer und das Script kann auf andere Weise auf den durch die Funktion gelieferten Rückgabewert reagieren.

<form>
  EMail <input id="email" name="email" type="text" /> <input type="button" onclick="isEmail (document.getElementById ('email'), '')" value="Test auf EMail-Adresse" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Unter Verwendung der Funktion isMail kann die Eingabe in einem Input-Element (vom Typ text)
// dahingehend geprüft werden, ob die vom Benutzer getätigte Eingabe eine gültige EMail-Adresse
// enthält - Wobei nur das Format der EMail-Adresse, nicht aber deren Existenz, geprüft werden kann.
// Als ersten Parameter erwartet die Funktion das Eingabeelement, dessen Inhalt geprüft werden muss.
// Der optionale zweite Parameter dient der Angabe einer individuellen Fehlermeldung, die in
// einer Alert-Box ausgegeben wird, wenn die angegebene EMail-Adresse nicht korrekt ist.
// Wird hier ein n>leeres String ("") angegeben, so gibt die Funktion eine Standard-Fehlermeldung
// aus. Der Rückgabewert ist TRUE, wenn die Eingabe im Eingabefeld eine vom Format her gültige
// EMail-Adresse enthält. Ansonsten wird FALSE geliefert und der Fokus wird aus das Eingabefeld
// gesetzt.
function isEmail (element, errMsg) {
  if (element && typeof element == 'object' && element.nodeType == 1 && element.type == 'text') {
    // Eingabe mit einem regulären Ausdruck auf das Format einer gültigen EMail-Adresse prüfen
    if (!element.value.match (/^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$/)) {
      if (typeof errMsg == 'string')
        if (errMsg.length != 0)
          alert (errMsg);
        else
          alert ('Format der EMail-Adresse in ' + element.name + ' ist ung\u00fcltig!');
      element.focus ();
      return false;
    }
    return true;
  }
  alert ('Angegebenes Element ist kein Textfeld!');
}
// -->
</script>
EMail

JavaScript Form Beispiel 12: Gültige URL checken

Im unten stehenden JavaScript-Code wird eine Funktion definiert, die eine vom Benutzer getätigte Eingabe auf das Format einer gültigen URL testet. Prinzipiell funktioniert die Funktion ebenso, wie die Vorherige und verwendet lediglich einen anderen regulären Ausdruck zur Prüfung der Eingabe. Das von den beiden Funktionen verwendete If-Statement unterscheidet sich demnach nur durch den Parameter, welcher an die Methode match übergeben wird und den regulären Ausdruck zum Erkennen einer URL enthält. Die Eingabeprüfung wird automatisch nach einem aufgetretenen onClick-Event auf dem Button eingeleitet.

Auch für die Parameter, welche von der Funktion isURL erwartet werden, gilt dasselbe wie bei der Funktion isEmail. Enthält der zweite Parameter ein String, so wird im Fehlerfall eine Alert-Box geöffnet, die eine entsprechende Fehlermeldung anzeigt. Siehe auch Window-Object und die durch seine Methoden unterstützten Möglichkeiten zum Öffnen von Dialogfenstern.

<form>
  URL <input id="url" name="url" type="text" /> <input type="button" onclick="isURL (document.getElementById ('url'), '')" value="Test auf URL" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Mit der Funktion isURL kann die Eingabe eines Eingabefeldes dahingehend geprüft werden,
// ob die eingegebene Zeichenkette eine syntaktisch korrekte URL beschreibt. Auch hier wird
// wieder nur das Format, nicht aber das Vorhandensein, der URL geprüft. Im ersten Parameter
// dieser Funktion wird das Input-Element, in dem die Eingabe erfolgte, angegeben. Hieraus
// wird die Value-Eigenschaft ausgelesen, die den Eingabestring enthält. Optional kann der
// Funktion im zweiten Parameter mitgeteilt werden, welche Fehlermeldung im Fehlerfall
// ausgegeben werden soll. Der Rückgabewert der Funktion ist TRUE, wenn die eingegebene
// Zeichenkette eine korrekte URL enthält. Ansonsten wird der Wert FALSE geliefert.
function isURL (element, errMsg) {
  if (element && typeof element == 'object' && element.nodeType == 1 && element.type == 'text') {
    // Inhalt des Eingabefeldes mit Hilfe eines regulären Ausdrucks auf das Format
    // einer gültigen URL prüfen
    if (!element.value.match (/^(http:\/\/)?([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$/)) {
      if (typeof errMsg == 'string')
        if (errMsg.length != 0)
          alert (errMsg);
        else
          alert ('URL in Eingabefeld ' + element.name + ' ist ung\u00fcltig!');
      element.focus ();
      return false;
    }
    return true;
  }
  alert ('Element ist kein INPUT-Feld vom Typ text!');
}
// -->
</script>
URL


¬ Insolvenzrecht