In der Vergangenheit wurde die Formularüberprüfung auf dem Server durchgeführt, nachdem eine Person bereits alle Informationen eingegeben und die Senden-Taste gedrückt hatte.
Wenn die Informationen falsch waren oder fehlten, musste der Server alles mit einer Nachricht zurücksenden, in der die Person aufgefordert wurde, das Formular zu korrigieren, bevor sie es erneut abschickte.
Dies war ein langwieriger Prozess, der den Server stark belasten würde.
Heutzutage bietet JavaScript eine Reihe von Möglichkeiten, um die Daten eines Formulars direkt im Browser zu überprüfen, bevor sie an den Server gesendet werden.
Hier ist der HTML-Code, den wir in den folgenden Beispielen verwenden:
Form Validation // Form validation will go here Username Email Address
Grundlegende Validierung
Bei dieser Art der Validierung werden alle Pflichtfelder überprüft und sichergestellt, dass sie ordnungsgemäß ausgefüllt sind.
Hier ist ein grundlegendes Beispiel für eine Funktion validate
, die eine Warnung anzeigt, wenn die Eingaben für Benutzername und E-Mail-Adresse leer sind. Andernfalls wird true zurückgegeben:
const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate);
Aber was ist, wenn jemand einen zufälligen Text als E-Mail-Adresse eingibt? Derzeit gibt die validate
Funktion immer noch true zurück. Wie Sie sich vorstellen können, kann das Senden fehlerhafter Daten an den Server zu Problemen führen.
Hier kommt die Validierung des Datenformats ins Spiel.
Validierung des Datenformats
Diese Art der Validierung überprüft tatsächlich die Werte im Formular und überprüft, ob sie korrekt sind.
Das Überprüfen von E-Mail-Adressen ist bekanntermaßen schwierig - es gibt eine große Anzahl legitimer E-Mail-Adressen und Hosts, und es ist unmöglich, alle gültigen Zeichenkombinationen zu erraten.
Es gibt jedoch einige Schlüsselfaktoren, die allen gültigen E-Mail-Adressen gemeinsam sind:
- Eine Adresse muss ein @ und mindestens ein Punktzeichen (.) Enthalten
- Das @ -Zeichen kann nicht das erste Zeichen in der Adresse sein
- Das . muss mindestens ein Zeichen nach dem @ -Zeichen stehen
Vor diesem Hintergrund verwenden Entwickler möglicherweise Regex, um festzustellen, ob eine E-Mail-Adresse gültig ist oder nicht. Hier ist eine Funktion, die Tyler McGinnis in seinem Blog empfiehlt:
const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true
Dem Code aus dem letzten Beispiel hinzugefügt, sieht es folgendermaßen aus:
const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate);
HTML5-Formularbeschränkungen
Einige der am häufigsten verwendeten HTML5 Einschränkungen für sind das
type
Attribut (zB type="password"
) maxlength
, required
und disabled
.
Eine weniger häufig verwendete Einschränkung ist das pattern
Attribut, das einen regulären JavaScript-Ausdruck akzeptiert.
Mehr Informationen
- Validierung der Formulardaten | MDN
- Einschränkungsvalidierung | MDN