Formularfelder überprüfen mit Javascript

Gültigkeitsprüfungen für Formularfelder gibt es viele. Der Befehl match() wird dabei seltsamerweise selten benutzt, obwohl damit Überprüfungen als Einzeiler möglich sind.

Wir stellen hier eine kleine Funktion vor, die schnell für fast alle Gültigkeitsprüfungen verwendet werden kann.

Alle aktuellen Browser kennen den Befehl match(). Dieser überprüft anhand von regulären Ausdrücken (Regular-Expressions) einen Text und gibt entweder NULL oder den Text zurück.

Ein Beispiel ist die Überprüfung von Postleitzahlen. Diese bestehen in Deutschland aus 5 Zahlen.

var text ="12345";
alert(text.match(/^[0-9]{5}$/));

Das Beispiel gibt nur bei exakt 5 Ziffern einen String aus. Wenn man z.B. ein Postleitzahlenfeld direkt nach der Eingabe überprüfen wollte, reicht folgender Befehl.

<input type="text" name="plz" onblur="if (!this.value.match(/^[0-9]{5}$/)) alert('Die Postleitzahl ist ungültig');" >

Im folgenden Codebeispiel prüft die Funktion testStr() je nach Aufruf die Gültigkeit von Texten, Emails oder Postleitzahlen.

 

Formcheck
<script type="text/javascript">
 
function testStr(tString,type) {
switch (type) {
case "email":
return !(tString.match(/([a-z0-9._-]
+ @[a-z0-9._-]
+.[a-z]{2,4})/gi
))? false:true;

break;
case "plz":
return !(tString.match(/^[0-9]{5}$/))? false:true;
break;
default:
return !(tString.match(/([a-z0-9.,;:öäüß _-])/gi))? false:true;
}
}
 
// falsche email testen
alert(testStr("test@un gueltig:de","email"));
// falsche plz testen
alert(testStr("1234","plz"));
// leeren oder falschen string testen
alert(testStr("","plz"));
</script>

 

Das ist natürlich nur eine Anregung. Reguläre Ausdrücke können viel komplexer sein. Die Überprüfung mit Javascript ersetzt natürlich auch nicht die Kontrolle der Eingabe nach dem Absenden. Da Python, Perl oder PHP natürlich auch mit regulären Ausdrücken umgehen können, kann man die gleichen Formeln einsetzen.

Links

  1. Ein Beispiel aus einem aktuellen Projekt (PLZ in der Suche)
  2. Reguläre Ausdrücke auf Wikipedia
  3. Der Befehl match() auf SelfHTML