JavaScript - Formularvalidierung: Ein Anfängerguide

Hallo da draußen, angehende Programmierer! Heute tauchen wir in die aufregende Welt der JavaScript-Formularvalidierung ein. Als jemand, der seit Jahren Programmierung unterrichtet, kann ich dir sagen, dass dies eine der praktischsten und wichtigsten Fähigkeiten ist, die du lernen wirst. Also, los geht's!

Was ist Formularvalidierung?

Bevor wir uns dem Code widmen, lassen wir uns zunächst darstellen, was Formularvalidierung ist und warum sie wichtig ist. Stell dir vor, du füllst ein Formular aus, um online eine Pizza zu bestellen. Du würdest nicht versehentlich 1000 Pizzen anstatt von einer bestellen, oder? Genau hier kommt die Formularvalidierung ins Spiel - sie überprüft die von den Benutzern eingegebenen Daten, um sicherzustellen, dass sie korrekt und im richtigen Format sind.

Grundlegende Formularvalidierung

1. Überprüfen, ob ein Feld leer ist

Lassen wir mit der einfachsten Validierung beginnen - die Überprüfung, ob ein Feld leer ist. Hier ist ein einfaches Beispiel:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name muss ausgefüllt werden");
return false;
}
}

In diesem Code:

• Holen wir uns den Wert eines Feldes namens "fname" aus einem Formular namens "myForm".
• Wenn der Wert leer ist (ein leerer String), zeigen wir eine Warnung an und geben false zurück, was verhindert, dass das Formular submitted wird.

2. Validierung numerischer Eingaben

Jetzt stellen wir sicher, dass ein Feld nur Zahlen enthält:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Eingabe ist nicht gültig");
return false;
}
}

Hier passiert folgendes:

• Wir holen uns den Wert eines Eingabefeldes mit der ID "myNumber".
• Wir verwenden isNaN() um zu überprüfen, ob es sich nicht um eine Zahl handelt.
• Wir überprüfen auch, ob die Zahl zwischen 1 und 100 liegt.
• Wenn eine dieser Bedingungen wahr ist, zeigen wir eine Warnung an und geben false zurück.

Validierung von Datenformaten

1. E-Mail-Validierung

Eine der häufigsten Validierungen ist die Überprüfung, ob eine E-Mail-Adresse im richtigen Format vorliegt. Hier ist, wie wir das tun können:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Bitte geben Sie eine gültige E-Mail-Adresse ein");
return false;
}
}

Dies mag etwas beängstigend aussehen, aber lassen wir es auseinanderbrechen:

• Wir verwenden einen regulären Ausdruck (regex), um das E-Mail-Format zu überprüfen.
• Der regex überprüft:
• Einige Zeichen, die weder Leerzeichen noch @ sind ([^\s@]+)
• Gefolgt von einem @-Symbol
• Gefolgt von mehr Zeichen, die weder Leerzeichen noch @ sind
• Gefolgt von einem Punkt
• Gefolgt von noch mehr Zeichen, die weder Leerzeichen noch @ sind

2. Datumvalidierung

Lassen wir das Datum überprüfen, um sicherzustellen, dass es im Format MM/DD/YYYY vorliegt:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Bitte geben Sie ein gültiges Datum im Format MM/DD/YYYY ein");
return false;
}
}

Dieser regex ist noch komplexer, aber hier ist, was er macht:

• Er überprüft:
• einen Monat (01-12)
• Gefolgt von einem /
• einen Tag (01-31)
• Ein weiteres /
• Ein 4-stelliges Jahr

Denke daran, dass dies die Formatüberprüfung durchführt, aber nicht überprüft, ob das Datum tatsächlich gültig ist (z.B. 30. Februar).

Alles zusammenfügen

Nun, da wir die individuellen Validierungen gesehen haben, kombinieren wir sie in ein einzelnes Formular:

<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname"><br>
Alter: <input type="text" id="myNumber"><br>
E-Mail: <input type="text" id="myEmail"><br>
Datum: <input type="text" id="myDate"><br>
<input type="submit" value="Einreichen">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name muss ausgefüllt werden");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Alter muss eine Zahl zwischen 1 und 100 sein");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Bitte geben Sie eine gültige E-Mail-Adresse ein");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Bitte geben Sie ein gültiges Datum im Format MM/DD/YYYY ein");
return false;
}
return true;
}
</script>

In diesem vollständigen Beispiel:

• Wir haben ein Formular mit Feldern für den Namen, das Alter, die E-Mail und das Datum.
• Das Formulars onsubmit- Ereignis ruft validateForm() auf.
• validateForm() ruft alle unsere individuellen Validierungsfunktionen auf.
• Wenn eine Validierung fehlschlägt, wird die Formularübermittlung verhindert.

Schlussfolgerung

Glückwunsch! Du hast die Grundlagen der JavaScript-Formularvalidierung gelernt. Bedenke, Validierung dient nicht nur dazu, Fehler zu verhindern - sie schafft auch ein besseres Benutzererlebnis. Während du deine Programmierreise fortsetzt, wirst du viele weitere Möglichkeiten entdecken, deine Formulare zu verbessern und benutzerfreundlicher zu gestalten.

Hier ist eine Tabelle, die die Validierungsmethoden zusammenfasst, die wir behandelt haben:

Methode	Zweck	Beispiel
Leerfeldprüfung	Stellt sicher, dass erforderliche Felder ausgefüllt sind	if (x == "")
Numerische Validierung	Überprüft, ob die Eingabe eine Zahl und im richtigen Bereich ist	if (isNaN(x) || x < 1 || x > 100)
E-Mail-Validierung	Verifiziert das E-Mail-Format	if (!regex.test(email))
Datumformat-Validierung	Überprüft, ob das Datum im richtigen Format vorliegt	if (!regex.test(date))

Weiter üben und bald wirst du ein Formularvalidierungszauberer sein! Denke daran, jeder großartige Programmierer hat genau dort angefangen, wo du jetzt bist. Viel Spaß beim Coden!

Credits: Image by storyset