JavaScript Formularvalidierung

Die Formularvalidierung ist der Prozess, bei dem sichergestellt wird, dass die von Benutzern eingegebenen Daten dem erwarteten Format und den erwarteten Regeln entsprechen.

In der Webentwicklung wird die Formularvalidierung häufig verwendet, um die Gültigkeit von Benutzereingaben zu prüfen, wie z. B. E-Mail-Adressen, Passwörter, Telefonnummern usw.

Durch die Formularvalidierung kann verhindert werden, dass ungültige Daten an den Server übermittelt werden, wodurch die Genauigkeit und Sicherheit der Daten verbessert werden.

JavaScript: Formularvalidierung

JavaScript kann verwendet werden, um die Eingabedaten in HTML-Formularen zu validieren, bevor sie an den Server gesendet werden.

Formulardaten müssen häufig mit JavaScript auf ihre Korrektheit hin validiert werden:

  • Validieren, ob die Formulardaten leer sind?
  • Überprüfen, ob die Eingabe eine korrekte E-Mail-Adresse ist?
  • Überprüfen, ob das Datum korrekt eingegeben wurde?
  • Überprüfen, ob der Inhalt der Formulareingabe numerisch ist?

Warum ist Formularvalidierung notwendig?

  1. Datengenauigkeit: Stellt sicher, dass die von Benutzern eingegebenen Daten dem erwarteten Format entsprechen, wodurch ungültige Daten vermieden werden.
  2. Sicherheit: Verhindert, dass böswillige Benutzer schädliche Daten übermitteln, wie SQL-Injection, Cross-Site-Scripting (XSS)-Angriffe usw.
  3. Benutzererfahrung: Bietet zeitnahes Feedback zu Fehlern bei Benutzereingaben und hilft Benutzern, Probleme schnell zu beheben.

Grundlegende Methoden der JavaScript-Formularvalidierung

JavaScript bietet mehrere Methoden zur Implementierung der Formularvalidierung. Im Folgenden werden einige gängige Ansätze vorgestellt:

1. Verwendung der integrierten HTML5-Validierung

HTML5 bietet einige integrierte Formularvalidierungsfunktionen, wie z. B.required、pattern、min、maxund andere Attribute. Diese Attribute können auf einfache Weise eine grundlegende Formularvalidierung implementieren.

Beispiel

<Form>
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</Form>

Im obigen Beispiel,requiredstellt das Attribut sicher, dass der Benutzer eine E-Mail-Adresse eingeben muss, undtype="email"validiert automatisch, ob die Eingabe in einem gültigen E-Mail-Format vorliegt.

2. Benutzerdefinierte Validierung mit JavaScript

Die folgende Funktion wird verwendet, um zu prüfen, ob der Benutzer die erforderlichen (oder obligatorischen) Felder im Formular ausgefüllt hat. Wenn die erforderlichen Felder leer sind, wird ein Warnungsdialog angezeigt, und die Funktion gibt false zurück; andernfalls gibt die Funktion true zurück (was bedeutet, dass es keine Probleme mit den Daten gibt):

function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("Nachname ist erforderlich"); return false; } }

Die obige Funktion wird aufgerufen, wenn das Formular abgesendet wird:

Beispiel

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">Nachname:<input type="text" name="fname"> <input type="submit" value="Absenden"> </Form>

Selbst ausprobieren »

E-Mail-Validierung

Die folgende Funktion prüft, ob die eingegebenen Daten der grundlegenden Syntax einer E-Mail-Adresse entsprechen.

Das bedeutet, dass die eingegebenen Daten ein @-Zeichen und einen Punkt (.) enthalten müssen. Außerdem darf @ nicht das erste Zeichen der E-Mail-Adresse sein, und nach dem @ muss mindestens ein Punkt stehen:

function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ alert("ist keine gültige E-Mail-Adresse"); return false; } }

Das Folgende ist der vollständige Code zusammen mit dem HTML-Formular:

Beispiel

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post"> E-Mail: <input type="text" name="email"> <input type="submit" value="Absenden"> </Form>

Selbst ausprobieren »

Verwendung von regulären Ausdrücken zur Validierung

Ein regulärer Ausdruck ist ein leistungsstarkes Werkzeug, mit dem komplexe Zeichenkettenmuster abgeglichen werden können.

Das Folgende ist ein Beispiel für die Verwendung eines regulären Ausdrucks zur Validierung einer E-Mail-Adresse:

Beispiel

function validateEmail(email) {
  var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

var email = "[email protected]";
if (validateEmail(email)) {
  console.log('Gültige E-Mail-Adresse.');
} else {
  console.log('Ungültige E-Mail-Adresse.');
}

Selbst ausprobieren »

In diesem Beispiel definieren wir einen regulären Ausdruck, um das Format der E-Mail-Adresse zu validieren. Wenn die eingegebene E-Mail-Adresse die Formatvorgaben erfüllt, gibt die Funktion zurücktrue, andernfalls gibt sie zurückfalse。

Andere Erweiterungen