Mit der Entwicklung des Internets ist die Registrierung zu einer Aufgabe geworden, die viele Menschen erledigen müssen. Es ist weit verbreitet, sich auf Websites und in Anwendungen zu registrieren, und bei diesen Registrierungsprozessen müssen Benutzer viele persönliche Informationen wie Benutzernamen, Passwort, E-Mail-Adresse usw. eingeben. Um die Zuverlässigkeit und Sicherheit dieser Informationen zu gewährleisten, müssen wir die Registrierungsinformationen überprüfen. In der Webentwicklung wird häufig die JavaScript-Validierung verwendet. In diesem Artikel besprechen wir, wie Sie mithilfe von JavaScript Registrierungsinformationen überprüfen und einige Sonderfunktionen hinzufügen.
Im Allgemeinen wird der Validierungsprozess des Front-End-Formulars ausgelöst, wenn es den Fokus gewinnt und den Fokus verliert. Mithilfe von JavaScript können wir eine Meldung anzeigen, wenn der Fokus erreicht wird, und eine entsprechende Überprüfung durchführen, wenn der Fokus verloren geht.
Zuerst müssen wir im HTML-Markup ein Formular erstellen, das das Formularelement enthält. Das Formularelement sollte ein Eingabefeld und eine Schaltfläche zum Senden enthalten. In diesem Beispiel verwenden wir ein einfaches Registrierungsformular als Beispiel.
<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST"> <label>用户名:</label><input type="text" name="userName" required /><br /> <label>密码:</label><input type="password" name="password" required /><br /> <label>确认密码:</label><input type="password" name="rePassword" required /><br /> <label>电子邮件:</label><input type="email" name="email" required /><br /> <button type="submit">注册</button> </form>
Wir können einige neue Attribute im Formularelement sehen, wie zum Beispiel „erforderlich“ und „onsubmit“. Unter diesen bedeutet „erforderlich“, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet werden kann, und „onsubmit“ bedeutet, dass die JavaScript-Funktion ausgeführt werden muss, bevor das Formular gesendet werden kann.
Als nächstes müssen wir eine JavaScript-Funktion implementieren, um die Formulardaten zu validieren. In diesem Beispiel implementieren wir eine Funktion namens „validateForm()“. Diese Funktion übernimmt die im Formular eingegebenen Daten und führt eine Validierung durch.
function validateForm() {
// Get the input data
var username = document.forms["registerForm"]["userName"].value;
var password = document.forms["registerForm"]["password"].value;
var repassword = document.forms["registerForm"]["rePassword"].value;
var email = document.forms["registerForm"]["email"].value;
// Check username
if (username == "") {
alert("用户名不能为空！");
document.forms["registerForm"]["userName"].focus();
return false;
}
// Check password
if (password == "") {
alert("密码不能为空！");
document.forms["registerForm"]["password"].focus();
return false;
}
// Check confirm password
if (repassword == "") {
alert("确认密码不能为空！");
document.forms["registerForm"]["rePassword"].focus();
return false;
} else {
if (repassword != password) {
alert("两次密码不匹配！");
document.forms["registerForm"]["password"].value = "";
document.forms["registerForm"]["rePassword"].value = "";
document.forms["registerForm"]["password"].focus();
return false;
}
}
// Check email
var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
if (email == "") {
alert("电子邮件不能为空！");
document.forms["registerForm"]["email"].focus();
return false;
} else if (!emailReg.test(email)) {
alert("电子邮件格式不正确！");
document.forms["registerForm"]["email"].value = "";
document.forms["registerForm"]["email"].focus();
return false;
}
// If all the data is correct, return true
return true;
}In dieser Funktion verwenden wir einige einfache Validierungsbedingungen, um die Richtigkeit der Formulardaten zu überprüfen. Überprüfen Sie beispielsweise, ob der Benutzername leer ist, prüfen Sie, ob das Passwort und das Bestätigungskennwort identisch sind, prüfen Sie, ob die E-Mail das richtige Format hat usw. Wenn die Eingabedaten nicht den Anforderungen entsprechen, wird eine Warnmeldung angezeigt und „false“ zurückgegeben, um das Absenden des Formulars zu verhindern. Gibt „true“ zurück, wenn alle Daten die Anforderungen erfüllen.
Als nächstes müssen wir eine JS-Funktion hinzufügen, um entsprechende Vorgänge am Eingabefeld auszuführen, das den Fokus erhält und den Fokus verliert.
// Add onfocus event
document.getElementsByName("userName")[0].onfocus = function() {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
};
document.getElementsByName("password")[0].onfocus = function() {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
};
document.getElementsByName("rePassword")[0].onfocus = function() {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
};
document.getElementsByName("email")[0].onfocus = function() {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
};
// Add onblur event
document.getElementsByName("userName")[0].onblur = function() {
if (document.getElementsByName("userName")[0].value == "") {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
} else {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("password")[0].onblur = function() {
if (document.getElementsByName("password")[0].value == "") {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
} else {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("rePassword")[0].onblur = function() {
if (document.getElementsByName("rePassword")[0].value == "") {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
} else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
} else {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("email")[0].onblur = function() {
var email = document.getElementsByName("email")[0].value;
var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
if (email == "") {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
} else if (!emailReg.test(email)) {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
} else {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
}
};In diesen Codes haben wir Ereignishandler für jedes Eingabefeld hinzugefügt. Wenn der Fokus erreicht ist, wird eine Eingabeaufforderung angezeigt. Nachdem der Fokus verloren gegangen ist, wird das Überprüfungsergebnis angezeigt. Wenn Sie beispielsweise einen Benutzernamen eingeben, wird neben dem Textfeld „Bitte geben Sie einen Benutzernamen ein“ angezeigt, und wenn die Eingabe falsch ist, wird eine spezielle Fehlermeldung angezeigt.
Abschließend können wir diese Codes zu einem vollständigen Beispiel zusammenfügen:
<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
<label>用户名:</label><input type="text" name="userName" required /><span></span><br />
<label>密码:</label><input type="password" name="password" required /><span></span><br />
<label>确认密码:</label><input type="password" name="rePassword" required /><span></span><br />
<label>电子邮件:</label><input type="email" name="email" required /><span></span><br />
<button type="submit">注册</button>
</form>
<script>
// Add onfocus event
document.getElementsByName("userName")[0].onfocus = function() {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
};
document.getElementsByName("password")[0].onfocus = function() {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
};
document.getElementsByName("rePassword")[0].onfocus = function() {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
};
document.getElementsByName("email")[0].onfocus = function() {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
};
// Add onblur event
document.getElementsByName("userName")[0].onblur = function() {
if (document.getElementsByName("userName")[0].value == "") {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
} else {
document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("password")[0].onblur = function() {
if (document.getElementsByName("password")[0].value == "") {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
} else {
document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("rePassword")[0].onblur = function() {
if (document.getElementsByName("rePassword")[0].value == "") {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
} else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
} else {
document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
}
};
document.getElementsByName("email")[0].onblur = function() {
var email = document.getElementsByName("email")[0].value;
var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
if (email == "") {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
} else if (!emailReg.test(email)) {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
} else {
document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
}
};
function validateForm() {
// Get the input data
var username = document.forms["registerForm"]["userName"].value;
var password = document.forms["registerForm"]["password"].value;
var repassword = document.forms["registerForm"]["rePassword"].value;
var email = document.forms["registerForm"]["email"].value;
// Check username
if (username == "") {
alert("用户名不能为空！");
document.forms["registerForm"]["userName"].focus();
return false;
}
// Check password
if (password == "") {
alert("密码不能为空！");
document.forms["registerForm"]["password"].focus();
return false;
}
// Check confirm password
if (repassword == "") {
alert("确认密码不能为空！");
document.forms["registerForm"]["rePassword"].focus();
return false;
} else {
if (repassword != password) {
alert("两次密码不匹配！");
document.forms["registerForm"]["password"].value = "";
document.forms["registerForm"]["rePassword"].value = "";
document.forms["registerForm"]["password"].focus();
return false;
}
}
// Check email
var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
if (email == "") {
alert("电子邮件不能为空！");
document.forms["registerForm"]["email"].focus();
return false;
} else if (!emailReg.test(email)) {
alert("电子邮件格式不正确！");
document.forms["registerForm"]["email"].value = "";
document.forms["registerForm"]["email"].focus();
return false;
}
// If all the data is correct, return true
return true;
}
</script>Das Obige ist der Prozess der Verwendung von JavaScript zur Überprüfung der Registrierungsinformationen. Anhand dieses Beispiels können wir sehen, dass die Front-End-Verifizierung die Benutzererfahrung und Datensicherheit erheblich verbessern kann. Daher gehen in der Webentwicklung die Überprüfung des Front-End-Formulars und die Überprüfung der Back-End-Daten Hand in Hand, um ein vollständiges Überprüfungssystem zu erreichen.
Das obige ist der detaillierte Inhalt vonBesprechen Sie, wie Sie JavaScript verwenden, um Registrierungsinformationen zu überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind Primzahlen?
Was ist Javaweb?
So wechseln Sie auf dem Laptop in den abgesicherten Modus
So überprüfen Sie den Videospeicher von Win11
Was ist ein UI-Designer?
Windows kann nicht auf den freigegebenen Computer zugreifen
So verwenden Sie Split in Python
Welche Daten speichert der Redis-Cache im Allgemeinen?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
