In der Frontend-Entwicklung ist die Formularvalidierung ein sehr wichtiger Teil. Es stellt sicher, dass die vom Benutzer eingegebenen Daten den Anforderungen entsprechen und sorgt für ein besseres Benutzererlebnis. JavaScript ist eine sehr beliebte und leistungsstarke Programmiersprache, die zur Implementierung der Formularvalidierung verwendet werden kann. In diesem Artikel stellen wir vor, wie man dw (Dreamweaver) zur Implementierung der JavaScript-Formularvalidierung verwendet.
dw ist ein hervorragender HTML-Editor und Website-Entwicklungstool. Es verfügt über umfangreiche visuelle Tools und Code-Editoren, die Entwicklern helfen können, Websites effizienter zu erstellen und zu verwalten. dw bietet außerdem JavaScript-Code-Eingabeaufforderungen und Syntaxprüfungsfunktionen, wodurch das Schreiben von JavaScript-Code einfacher und schneller wird.
Bevor wir beginnen, benötigen wir ein Formular. Das Erstellen eines Formulars in DW ist sehr einfach. Verwenden Sie einfach das Formular-Kontrollfeld. Wählen Sie „Fenster“ -> „Steuerelemente“ in der Menüleiste von dw, um das Formular-Kontrollfeld zu öffnen. Wählen Sie im Panel das gewünschte Formularsteuerelement aus und ziehen Sie es in die Mitte der Seite. In diesem Artikel verwenden wir ein einfaches Anmeldeformular als Beispiel für die Implementierung der Formularüberprüfung.
Das Folgende ist die Code-Implementierung:
Im Anmeldeformular müssen Benutzer ihre eigene E-Mail-Adresse eingeben, daher müssen wir die vom Benutzer eingegebene E-Mail-Adresse überprüfen.
Zuerst müssen wir eine ID für das E-Mail-Eingabefeld definieren, damit es in JavaScript funktioniert. In dw können Sie die ID für das Formularsteuerelement im Eigenschaftenfenster festlegen. In diesem Beispiel setzen wir die ID für das E-Mail-Eingabefeld auf „email“.
Als nächstes müssen wir eine Funktion im JavaScript-Code definieren, um die E-Mail-Verifizierung durchzuführen. Der Code wird wie folgt implementiert:
function validateEmail() {
var email = document.getElementById("email").value;
var emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
if (!emailPattern.test(email)) {
alert("请输入有效的邮箱地址！");
return false;
}
return true;
}Zuerst definieren wir eine Variable „email“, um die vom Benutzer eingegebene E-Mail-Adresse zu speichern. Als Nächstes haben wir einen regulären Ausdruck definiert, um E-Mail-Adressen abzugleichen. Dieser reguläre Ausdruck entspricht den meisten gängigen E-Mail-Adressformaten.
Anschließend überprüfen wir mit der Methode test(), ob die vom Benutzer eingegebene E-Mail-Adresse mit dem regulären Ausdruck übereinstimmt. Wenn sie nicht übereinstimmt, wird ein Warnfeld angezeigt, das den Benutzer auffordert, eine gültige Adresse einzugeben und „false“ zurückzugeben. Andernfalls wird true zurückgegeben.
Schließlich müssen wir die Funktion an das Submit-Ereignis des Formulars binden, um zu validieren, wenn der Benutzer auf die Submit-Schaltfläche klickt. In dw können Sie das Submit-Ereignis für das Formularsteuerelement im Eigenschaftenbereich festlegen.
Der Code ist wie folgt implementiert:
<form onsubmit="return validateEmail()"> // 表单控件 <input type="email" id="email" name="email" required> // 提交按钮 <input type="submit" value="提交"> </form>
Definieren Sie das onsubmit-Ereignis im Formularelement und binden Sie es an die gerade definierte Überprüfungsfunktion. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, validiert das Formular automatisch die Daten und übermittelt sie.
Im Anmeldeformular müssen Benutzer auch ihr eigenes Passwort eingeben, daher müssen wir auch das vom Benutzer eingegebene Passwort überprüfen.
Anforderungen zur Passwortüberprüfung umfassen normalerweise Einschränkungen der Passwortlänge, Einschränkungen der Passwortkomplexität usw. In diesem Artikel begrenzen wir lediglich die Passwortlänge, die zwischen 6 und 20 Zeichen liegen muss.
Zuerst müssen wir eine ID für das Passwort-Eingabefeld definieren, damit es in JavaScript funktioniert. In dw können Sie die ID für das Formularsteuerelement im Eigenschaftenfenster festlegen. In diesem Beispiel setzen wir die ID für das Passwort-Eingabefeld auf „Passwort“.
Als nächstes müssen wir eine Funktion im JavaScript-Code zur Passwortüberprüfung definieren. Der Code wird wie folgt implementiert:
function validatePassword() {
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 20) {
alert("密码长度必须在6到20个字符之间！");
return false;
}
return true;
}Zunächst definieren wir eine Variable „password“, um das vom Benutzer eingegebene Passwort zu speichern. Als nächstes ermitteln wir, ob die Passwortlänge zwischen 6 und 20 Zeichen beträgt. Wenn es nicht übereinstimmt, erscheint ein Warnfeld, das den Benutzer auffordert, ein gültiges Passwort einzugeben und „false“ zurückzugeben. Andernfalls wird true zurückgegeben.
Schließlich müssen wir die Funktion an das Submit-Ereignis des Formulars binden, um zu validieren, wenn der Benutzer auf die Submit-Schaltfläche klickt. In dw können Sie das Submit-Ereignis für das Formularsteuerelement im Eigenschaftenbereich festlegen.
Der Code ist wie folgt implementiert:
<form onsubmit="return validateEmail() && validatePassword()"> // 表单控件 <input type="email" id="email" name="email" required> <input type="password" id="password" name="password" required> // 提交按钮 <input type="submit" value="提交"> </form>
Definieren Sie das onsubmit-Ereignis im Formularelement und binden Sie es an die gerade definierte Überprüfungsfunktion. Hier kombinieren wir die E-Mail-Verifizierungsfunktion und die Passwort-Verifizierungsfunktion mit dem Operator „&&“. Die Übermittlung von Daten ist nur zulässig, wenn der Rückgabewert beider Funktionen wahr ist.
An diesem Punkt ist der Prozess der Implementierung der JavaScript-Formularvalidierung in dw abgeschlossen. Wenn die vom Benutzer eingegebenen Daten nicht den Anforderungen entsprechen, wird ein Warnfeld angezeigt, um den Benutzer daran zu erinnern und das Absenden des Formulars zu verhindern. Auf diese Weise können wir die Datensicherheit der Benutzer besser schützen und ein besseres Benutzererlebnis bieten.
Das obige ist der detaillierte Inhalt vondw implementiert die Überprüfung von Javascript-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
