Avec le développement d'Internet, l'inscription est devenue une tâche que de nombreuses personnes doivent accomplir. Il est devenu très courant de s'inscrire sur des sites Web et des applications, et ces processus d'inscription nécessitent que les utilisateurs remplissent de nombreuses informations personnelles, telles que le nom d'utilisateur, le mot de passe, l'adresse e-mail, etc. Afin de garantir la fiabilité et la sécurité de ces informations, nous devons vérifier les informations d'enregistrement. Dans le développement Web, la validation JavaScript est largement utilisée. Dans cet article, nous verrons comment utiliser JavaScript pour vérifier les informations d'enregistrement et ajouter quelques fonctionnalités spéciales.
De manière générale, le processus de validation du formulaire frontal est déclenché lorsqu'il gagne ou perd du focus. En utilisant JavaScript, nous pouvons afficher un message d'invite lorsque le focus est obtenu et effectuer la vérification correspondante lorsque le focus est perdu.
Tout d'abord, dans le balisage HTML, nous devons créer un formulaire qui contient l'élément form. L'élément de formulaire doit contenir un champ de saisie et un bouton de soumission. Dans cet exemple, nous utiliserons un simple formulaire d’inscription comme exemple.
<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>
Nous pouvons voir de nouveaux attributs dans l'élément de formulaire, tels que "obligatoire" et "onsubmit". Parmi eux, « obligatoire » signifie que la zone de saisie doit être remplie avant que le formulaire puisse être soumis, et « onsubmit » signifie la fonction JavaScript à exécuter avant de soumettre le formulaire.
Ensuite, nous devons implémenter une fonction JavaScript pour valider les données du formulaire. Dans cet exemple, nous allons implémenter une fonction appelée validateForm(). Cette fonction prendra les données saisies dans le formulaire et effectuera une validation.
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;
}Dans cette fonction, nous utilisons quelques conditions de validation simples pour vérifier l'exactitude des données du formulaire. Par exemple, vérifiez si le nom d'utilisateur est vide, vérifiez si le mot de passe et le mot de passe de confirmation sont identiques, vérifiez si l'e-mail est au bon format, etc. Si les données saisies ne répondent pas aux exigences, un message d'avertissement apparaîtra et false sera renvoyé pour empêcher la soumission du formulaire. Renvoie vrai si toutes les données répondent aux exigences.
Ensuite, nous devons ajouter une fonction JS pour effectuer les opérations correspondantes sur la zone de saisie en gagnant et en perdant le focus.
// 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 = "";
}
};Dans ces codes, nous avons ajouté des gestionnaires d'événements pour chaque champ de saisie. Lorsque la mise au point est obtenue, un message d'invite s'affiche ; une fois la mise au point perdue, le résultat de la vérification s'affiche. Par exemple, lors de la saisie d'un nom d'utilisateur, « Veuillez saisir le nom d'utilisateur » s'affichera à côté de la zone de texte et un message d'erreur spécifique s'affichera lorsque la saisie est incorrecte.
Enfin, nous pouvons rassembler ces codes pour former un exemple complet :
<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>Ce qui précède est le processus de vérification des informations d'enregistrement à l'aide de JavaScript. À travers cet exemple, nous pouvons voir que la vérification frontale peut grandement améliorer l’expérience utilisateur et la sécurité des données. Par conséquent, dans le développement Web, la vérification des formulaires front-end et la vérification des données back-end vont de pair pour obtenir un système de vérification complet.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Utilisation de la commande zip de compression Linux
outils de développement php
Qu'est-ce qu'un serveur de noms de domaine racine
Quelle est la différence entre passer par valeur et passer par référence en Java
Sur quelle touche dois-je appuyer pour récupérer lorsque je ne parviens pas à taper sur le clavier de mon ordinateur ?
CSS définir la couleur du texte
Comment ouvrir le fichier VSD
La différence entre Java et Java
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
