js formulaire vérification exemple analyse_javascript compétences-js tutoriel-php.cn

L'exemple de cet article décrit la méthode de vérification de formulaire à l'aide de js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

1. Code de validation du formulaire traditionnel

Copier le code Le code est le suivant : 表单验证 fonction $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var mot de passe = $("mot de passe").value; var repassword = $("repassword").value; var nom = $("nom").value; if(email == "") { alert("Email值不能为空"); $("e-mail").focus(); renvoie faux ; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { alert("邮箱格式不正确,必须包含@和."); $("e-mail").focus(); renvoie faux ; } if(mot de passe == "") { alert("密码不能为空"); $("mot de passe").focus(); renvoie faux ; } if(mot de passe.longueur alert("密码长度必须大于或者等于6"); $("mot de passe").focus(); renvoie faux ; } if(repassword != mot de passe) { alert("两次输入的密码不一致"); $("repassword").focus(); renvoie faux ; } if(nom == "") { alert("姓名不能为空"); $("nom").focus(); renvoie faux ; } for(var i = 0; i var j = nom.subString(i , i 1); if(isNaN(j) == false) { alert('姓名中不能包含数字'); $("nom").focus(); renvoie faux ; } } } &Lt;/tête> E-mail : Mot de passe : Saisissez à nouveau le mot de passe : Nom :

2. Vérification du formulaire avec des informations rapides derrière la zone de saisie

Copier le code

Le code est le suivant : 表单验证 fonction $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var mot de passe = $("mot de passe").value; var repassword = $("repassword").value; var nom = $("nom").value; $("emailinfo").innerHTML = ""; $("infomot de passe").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(email == "") { $("emailinfo").innerHTML = "E-mail envoyé"; $("e-mail").focus(); renvoie faux ; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; $("e-mail").focus(); renvoie faux ; } if(mot de passe == "") { $("passwordinfo").innerHTML = "密码不能为空"; $("mot de passe").focus(); renvoie faux ; } if(mot de passe.longueur $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; $("mot de passe").focus(); renvoie faux ; } if(repassword != mot de passe) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; $("repassword").focus(); renvoie faux ; } if(nom == "") { $("nameinfo").innerHTML = "姓名不能为空"; $("nom").focus(); renvoie faux ; } for(var i = 0; i var j = nom.subString(i , i 1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; $("nom").focus(); renvoie faux ; } } } &Lt;/tête> E-mail : Nom : 重输密码 : 姓名： 效果图如下所示：

3. 在输入框失去焦点时触发校验函数

复制代码 代码如下 : 表单验证 fonction $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var mot de passe = $("mot de passe").value; var repassword = $("repassword").value; var nom = $("nom").value; $("emailinfo").innerHTML = ""; $("infomot de passe").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(email == "") { $("emailinfo").innerHTML = "E-mail envoyé"; renvoie faux ; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; renvoie faux ; } if(mot de passe == "") { $("passwordinfo").innerHTML = "密码不能为空"; renvoie faux ; } if(mot de passe.longueur $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; renvoie faux ; } if(repassword != mot de passe) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; renvoie faux ; } if(nom == "") { $("nameinfo").innerHTML = "姓名不能为空"; renvoie faux ; } for(var i = 0; i var j = nom.subString(i , i 1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; renvoie faux ; } } } function checkEmail() { //校验Email $('emailinfo').innerHTML = ""; var email = $('email').value; if(email == "") { $('emailinfo').innerHTML = "Email值不能为空"; return false; } if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { $('emailinfo').innerHTML = "Email必须包含@和."; return false; } } function checkPassword() { //校验密码 $('passwordinfo').innerHTML = ""; var password = $('password').value; if(password == "") { $("passwordinfo").innerHTML = "密码不能为空"; return false; } if(password.length $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; return false; } } function checkRepassword() { //校验重新输入的密码 $('repassword').innerHTML = ""; var repassword = $('repassword').value; if(repassword != password) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; return false; } } function checkName() { //校验姓名 $('nameinfo').innerHTML = ""; var name = $('name').value; if(name == "") { $("nameinfo").innerHTML = "姓名不能为空"; return false; } for(var i = 0; i var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; return false; } } } Email: 密码: Saisissez à nouveau le mot de passe : 🎜 > Nom :

Le rendu est le suivant :

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.