Grundlegende Formularüberprüfung in JavaScript

Programmierung

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 validateFunktion 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 typeAttribut (zB type="password") maxlength, requiredund disabled.

Eine weniger häufig verwendete Einschränkung ist das patternAttribut, das einen regulären JavaScript-Ausdruck akzeptiert.

Mehr Informationen

  • Validierung der Formulardaten | MDN
  • Einschränkungsvalidierung | MDN