Cet article décrit la méthode de JS pour la vérification des formulaires. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
1. Code de vérification de formulaire traditionnel
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Vérification du formulaire </TITME>
<script type = "text / javascript">
fonction $ (id) {
return document.getElementById (id);
}
Fonction Check () {
var email = $ ("e-mail"). valeur;
var mot de passe = $ ("mot de passe"). valeur;
var repassword = $ ("repassword"). valeur;
var name = $ ("name"). valeur;
if (email == "") {
alert ("La valeur de messagerie ne peut pas être vide");
$ ("e-mail"). focus ();
retourne false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
alerte ("Le format de boîte aux lettres est incorrect, doit inclure @ et.");
$ ("e-mail"). focus ();
retourne false;
}
if (mot de passe == "") {
alert ("le mot de passe ne peut pas être vide");
$ ("mot de passe"). focus ();
retourne false;
}
if (mot de passe.length <6) {
alerte ("La longueur du mot de passe doit être supérieure ou égale à 6");
$ ("mot de passe"). focus ();
retourne false;
}
if (repassword! = mot de passe) {
alert ("Le mot de passe entré deux fois est incohérent");
$ ("repassword"). focus ();
retourne false;
}
if (name == "") {
alert ("le nom ne peut pas être vide");
$ ("name"). focus ();
retourne false;
}
pour (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i + 1);
if (isnan (j) == false) {
alert ('le nom ne peut pas contenir de nombres');
$ ("name"). focus ();
retourne false;
}
}
}
</cript>
</ head>
<body>
<form name = "login_form" méthode = "post" onSubmit = "return check ()">
<div>
Email: <entrée type = "text" name = "e-mail" id = "e-mail" />
</div>
<div>
Mot de passe: <entrée type = "mot de passe" name = "mot de passe" id = "mot de passe" />
</div>
<div>
Rentrez dans le mot de passe: <input type = "mot de passe" name = "repassword" id = "repassword" />
</div>
<div>
Nom: <input type = "text" name = "name" id = "name" />
</div>
<div>
<input type = "soumi" value = "registre" />
</div>
</ form>
</docy>
</html>
2. Vérification du formulaire avec des informations rapides derrière la zone d'entrée
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Vérification du formulaire </TITME>
<script type = "text / javascript">
fonction $ (id) {
return document.getElementById (id);
}
Fonction Check () {
var email = $ ("e-mail"). valeur;
var mot de passe = $ ("mot de passe"). valeur;
var repassword = $ ("repassword"). valeur;
var name = $ ("name"). valeur;
$ ("emailInfo"). innerhtml = "";
$ ("Passwordinfo"). innerHtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
if (email == "") {
$ ("emailInfo"). innerhtml = "La valeur de messagerie ne peut pas être vide";
$ ("e-mail"). focus ();
retourne false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerhtml = "Le format de boîte aux lettres est incorrect, doit inclure @ et.";
$ ("e-mail"). focus ();
retourne false;
}
if (mot de passe == "") {
$ ("PasswordInfo"). innerhtml = "mot de passe ne peut pas être vide";
$ ("mot de passe"). focus ();
retourne false;
}
if (mot de passe.length <6) {
$ ("PasswordInfo"). innerhtml = "La longueur de mot de passe doit être supérieure ou égale à 6";
$ ("mot de passe"). focus ();
retourne false;
}
if (repassword! = mot de passe) {
$ ("repasswordInfo"). innerhtml = "Le mot de passe entré deux fois est incohérent";
$ ("repassword"). focus ();
retourne false;
}
if (name == "") {
$ ("nameInfo"). innerhtml = "Le nom ne peut pas être vide";
$ ("name"). focus ();
retourne false;
}
pour (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i + 1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Le nom ne peut pas contenir de nombres';
$ ("name"). focus ();
retourne false;
}
}
}
</cript>
</ head>
<body>
<form name = "login_form" méthode = "post" onSubmit = "return check ()">
<div>
Email: <entrée type = "text" name = "e-mail" id = "e-mail" /> <span id = "e-mailInfo"> </span>
</div>
<div>
Mot de passe: <input type = "mot de passe" name = "mot de passe" id = "mot de passe" /> <span id = "mot de passe-mot de passe"> </span>
</div>
<div>
Rentrez dans le mot de passe: <input type = "mot de passe" name = "repassword" id = "repassword" /> <span id = "repasswordInfo"> </span>
</div>
<div>
Nom: <input type = "text" name = "name" id = "name" /> <span id = "nameInfo"> </ span>
</div>
<div>
<input type = "soumi" value = "registre" />
</div>
</ form>
</docy>
</html>
Les rendus sont les suivants:
3. Déclenchez la fonction de cocher lorsque la zone d'entrée perd Focus
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Vérification du formulaire </TITME>
<script type = "text / javascript">
fonction $ (id) {
return document.getElementById (id);
}
Fonction Check () {
var email = $ ("e-mail"). valeur;
var mot de passe = $ ("mot de passe"). valeur;
var repassword = $ ("repassword"). valeur;
var name = $ ("name"). valeur;
$ ("emailInfo"). innerhtml = "";
$ ("Passwordinfo"). innerHtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
if (email == "") {
$ ("emailInfo"). innerhtml = "La valeur de messagerie ne peut pas être vide";
retourne false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerhtml = "Le format de boîte aux lettres est incorrect, doit inclure @ et.";
retourne false;
}
if (mot de passe == "") {
$ ("PasswordInfo"). innerhtml = "mot de passe ne peut pas être vide";
retourne false;
}
if (mot de passe.length <6) {
$ ("PasswordInfo"). innerhtml = "La longueur de mot de passe doit être supérieure ou égale à 6";
retourne false;
}
if (repassword! = mot de passe) {
$ ("repasswordInfo"). innerhtml = "Le mot de passe entré deux fois est incohérent";
retourne false;
}
if (name == "") {
$ ("nameInfo"). innerhtml = "Le nom ne peut pas être vide";
retourne false;
}
pour (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i + 1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Le nom ne peut pas contenir de nombres';
retourne false;
}
}
}
Fonction CheckEmail () {// Vérifiez le courrier électronique
$ ('emailInfo'). innerhtml = "";
var email = $ ('e-mail'). valeur;
if (email == "") {
$ ('emailInfo'). innerhtml = "La valeur de messagerie ne peut pas être vide";
retourne false;
}
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerhtml = "e-mail doit contenir @ et.";
retourne false;
}
}
Fonction CheckPassword () {// Vérifiez le mot de passe
$ ('passwordinfo'). innerhtml = "";
var mot de passe = $ ('mot de passe'). valeur;
if (mot de passe == "") {
$ ("PasswordInfo"). innerhtml = "mot de passe ne peut pas être vide";
retourne false;
}
if (mot de passe.length <6) {
$ ("PasswordInfo"). innerhtml = "La longueur de mot de passe doit être supérieure ou égale à 6";
retourne false;
}
}
fonction CheckRepassword () {// Vérifiez le mot de passe rentré
$ ('repassword'). innerhtml = "";
var repassword = $ ('repassword'). valeur;
if (repassword! = mot de passe) {
$ ("repasswordInfo"). innerhtml = "Le mot de passe entré deux fois est incohérent";
retourne false;
}
}
Fonction CheckName () {// CHECK NAME
$ ('nameInfo'). innerhtml = "";
var name = $ ('name'). valeur;
if (name == "") {
$ ("nameInfo"). innerhtml = "Le nom ne peut pas être vide";
retourne false;
}
pour (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i + 1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Le nom ne peut pas contenir de nombres';
retourne false;
}
}
}
</cript>
</ head>
<body>
<form name = "login_form" méthode = "post" onSubmit = "return check ()">
<div>
Email: <entrée type = "text" name = "e-mail" id = "e-mail" onblur = "checkEmail ();" /> <span id = "emailInfo"> </span>
</div>
<div>
Mot de passe: <input type = "mot de passe" name = "mot de passe" id = "mot de passe" onblur = "checkPassword ();" /> <span id = "passwordinfo"> </span>
</div>
<div>
Rentrez dans le mot de passe: <input type = "mot de passe" name = "repassword" id = "repassword" onblur = "checkRepassword ();" /> <span id = "repasswordInfo"> </ span>
</div>
<div>
Nom: <input type = "text" name = "name" id = "name" onblur = "checkName ();" /> <span id = "nameInfo"> </ span>
</div>
<div>
<input type = "soumi" value = "registre" />
</div>
</ form>
</docy>
</html>
Les rendus sont les suivants:
J'espère que cet article sera utile à la programmation JavaScript de tous.