Validation du formulaire JavaScript
La validation du formulaire est la partie fondamentale et la plus importante du processus de développement Web. Habituellement, la validation du formulaire est effectuée sur le côté serveur. La validation du formulaire aide à afficher des messages d'erreur à l'utilisateur s'il y a des données inutiles ou erronées sont fournies, ou si un champ requis est vide. Si le serveur trouve une erreur, il rejette cette erreur; Ensuite, nous montrons le message d'erreur à l'utilisateur. Mais, nous pouvons utiliser JavaScript à l'avant pour valider les données du formulaire et afficher les erreurs immédiatement. Dans cet article, nous apprendrons la validation de base de la forme en JavaScript. Alors, allons directement aux exemples et voyons comment pouvons-nous le faire en javascript.
Exemples
Tout d'abord, nous supposons un formulaire avec le nom de «TestForm», dans lequel nous avons un champ de saisie avec l'étiquette «nom d'utilisateur» et un type d'entrée se soumet dans notre fichier HTML. Dans la balise de formulaire, nous avons créé un événement onSubmit, dans lequel nous faisons la fermeture et renvoyons une fonction validerfunc ().
Dans le fichier de script, nous rédigerons la définition de la fonction de validatefunc (), qui sera exécutée à chaque fois lorsque l'utilisateur frappera le bouton Soumettre. Dans cette fonction, nous validerons le champ de saisie du nom d'utilisateur. Nous supposons que nous voulons valider le champ de nom d'utilisateur est vide ou non lorsque l'utilisateur frappe le bouton Soumettre.
Donc, pour valider le champ de nom d'utilisateur. Nous attribuons d'abord une variable au document.TestForm, juste pour donner un aspect propre et compréhensible au code. Ensuite, dans la définition de la fonction, nous écrivons le code pour la validation. Nous rédigeons une instruction IF pour vérifier le champ de formulaire vide. Si le champ de nom d'utilisateur est vide, nous afficherons une boîte d'alerte pour afficher l'erreur, concentrer à nouveau sur le champ du nom d'utilisateur et revenir faux afin que le formulaire ne soit pas soumis. Sinon, s'il passe le chèque et que les données sont validées, nous reviendrons true à la fonction.
var theform = document.TestForm;// Code de validation de formulaire
fonction validationfunc ()
if (theform.nom.valeur == "")
alert ("le nom est vide");
la forme.nom.se concentrer();
retourne false;
return (true);
Après avoir écrit tout ce code. Si nous exécutons le code et cliquez sur le bouton Soumettre sans rien écrire dans le champ Formulaire.
Comme vous pouvez l'observer dans la capture d'écran ci-dessous, il lance une erreur dans la boîte d'alerte.
Ceci est un exemple très basique mais bon pour commencer par la mise en œuvre de la validation du formulaire. Pour une mise en œuvre plus approfondie, comme les validations de formulaires multiples ou vous souhaitez également vérifier la longueur du caractère.
À cette fin, nous supposons d'abord deux champs de formulaire dans la balise de formulaire avec l'étiquette «e-mail» et «mot de passe» dans notre fichier HTML.
Pour la validation en JavaScript, nous allons à nouveau mettre une instruction IF pour valider les champs de formulaire de messagerie et de mot de passe dans la définition de la fonction du fichier de script. Supposons que nous voulons appliquer plusieurs validations sur le champ de messagerie comme le champ ne devrait pas être vide, et sa longueur ne devrait pas être inférieure à 10 caractères. Ainsi, nous pouvons utiliser ou «||» Dans la déclaration if. Si l'une de ces erreurs se produit, elle affichera une boîte d'alerte avec le message d'erreur que nous voulons afficher, se concentrer sur le champ de formulaire de messagerie et retourner faux à la fonction. De même, si nous voulons appliquer la vérification de la longueur du caractère sur le champ du mot de passe, nous pouvons le faire.
var theform = document.TestForm;// Code de validation de formulaire
fonction validationfunc ()
if (theform.nom.valeur == "")
alert ("le nom est vide");
la forme.nom.se concentrer();
retourne false;
if (theform.e-mail.valeur == "" || la forme.e-mail.valeur.longueur < 10)
alert ("e-mail est inapproprié");
la forme.e-mail.se concentrer();
retourne false;
if (theform.mot de passe.valeur.longueur < 6)
alert ("le mot de passe doit comporter 6 caractères");
la forme.mot de passe.se concentrer();
retourne false;
return (true);
Après avoir écrit tout ce code, rechargez la page pour avoir le code mis à jour. Maintenant, soit nous laissons un champ d'e-mail vide ou écrivons un e-mail moins de 10 caractères. Dans les deux cas, il montrera une erreur «e-mail est inappropriée».
C'est donc ainsi que nous pouvons appliquer la validation de base du formulaire en javascript. Nous pouvons également appliquer la validation des données sur le côté client en utilisant Regex ou en écrivant notre propre fonction personnalisée. Supposons que nous voulons appliquer la validation des données sur le champ de messagerie. Le regex serait comme ça pour valider un e-mail.
if (/ ^ [a-za-z0-9.!# $% & '* + / =?^ _ '| ~ -] + @ [a-za-z0-9 -] + (?: \.[a-za-z0-9 -] +) * $ /.tester (la forme.e-mail.valeur))
alert ("e-mail est inapproprié");
la forme.e-mail.se concentrer() ;
retourne false;
C'était juste une démonstration de base de la validation des données à l'aide de regex. Mais, le ciel est ouvert à voler.
Conclusion
Cet article couvre la validation de base du formulaire en javascript. Nous avons également essayé et gardé dans la validation des données en utilisant Regex. Si vous souhaitez en savoir plus sur Regex, nous avons un article dédié lié à Regex sur Linuxhint.com. Pour apprendre et comprendre les concepts de JavaScript et un contenu plus utile comme celui-ci, continuez à visiter Linuxhint.com. Merci!