Validation du formulaire à l'aide de HTML et JavaScript
Étape 1: Configuration du document HTML
Créez un nouveau document HTML et tapez dans les lignes suivantes à l'intérieur pour créer un formulaire:
Ceci est un exemple de validation de formulaire
Dans les lignes ci-dessus:
- UN La balise est utilisée pour créer un formulaire avec le nom défini sur formulaire de validité et la méthode est définie sur "poste". De plus, la propriété OnSubmit est définie sur «Return formSubmit ()» qui exécute cette méthode lors de la soumission et ne soumet le formulaire que si cette méthode renvoie true.
- Après cela, utilisez simplement Tags pour inviter l'utilisateur et Pour prendre les commentaires de l'utilisateur. N'oubliez pas que chaque balise d'entrée a un nom unique.
- À la fin du formulaire, créez un bouton avec le taper mis à "soumettre".
Si le document HTML est chargé dans un navigateur Web, il affichera ce qui suit:
La page Web demande le prénom, l'adresse e-mail et le numéro de contact de l'utilisateur.
Étape 2: Configuration du fichier javascript
Dans JavaScript, commencez par créer la fonction FormSubmit () avec les lignes suivantes:
fonction forme FormSubmit ()// Toutes les lignes suivantes seront incluses dans le corps de cette fonction
Après cela, créez trois variables et stockez les valeurs des trois champs à l'intérieur en utilisant les lignes suivantes:
var firstname = document.formes.formulaire de validité.nom.valeur;var conactnumber = document.formes.formulaire de validité.e-mail.valeur;
var emailadr = document.formes.formulaire de validité.télé.valeur;
Dans les lignes ci-dessus, le "document" L'objet a été utilisé pour obtenir le "formes" attribut, qui a été utilisé avec le nom du formulaire formulaire de validité Pour accéder aux balises d'entrée avec leurs noms à l'intérieur.
Après cela, définissez les expressions régulières pour vérifier la validité de chaque champ avec les lignes suivantes:
var emailRegex = / ^ \ w + ([\.-]]?\ w +) * @ \ w + ([\.-]]?\ w +) * (\.\ w 2,3) + $ / g;var teleregex = / ^ \ d 10 $ /;
var nameRegex = / \ d + $ / g;
Dans les lignes ci-dessus:
- emailRegex vérifie une adresse e-mail valide avec @ y compris et même permet un point ".»Et un trait d'union
- télégerex Vérifie uniquement les caractères numériques avec une longueur maximale de l'entrée définie sur 10
- nameregex Vérifie les caractères ou numéros spéciaux dans le champ Nom
Après cela, comparez les trois expressions régulières avec leurs valeurs de champ de texte respectives à l'aide des instructions IF, et si un champ n'est pas valide, retournez simplement et alerte l'utilisateur, pour tout cela, utilisez les lignes suivantes:
if (firstName == "" || nameregex.test (firstName))fenêtre.alert ("prénom non valide");
returnFalse;
if (emailadr == "" || !emailRegex.test (emailadr))
fenêtre.alert ("Veuillez saisir une adresse e-mail valide.");
returnFalse;
if (conactnumber == "" || !télégerex.test (conactnumber))
alert ("numéro de téléphone non valide");
returnFalse;
Après cela, invitez l'utilisateur pour que les entrées étaient valides et renvoient la valeur comme vrai:
alert ("formulaire soumis avec des informations correctes");Retour Vrai;
Le code JavaScript complet est comme:
functionformSubmit ()var firstname = document.formes.formulaire de validité.nom.valeur;
var conactnumber = document.formes.formulaire de validité.e-mail.valeur;
var emailadr = document.formes.formulaire de validité.télé.valeur;
var emailRegex = / ^ \ w + ([\.-]]?\ w +) * @ \ w + ([\.-]]?\ w +) * (\.\ w 2,3) + $ / g;
var teleregex = / ^ \ d 10 $ /;
var nameRegex = / \ d + $ / g;
if (firstName == "" || nameregex.test (firstName))
fenêtre.alert ("prénom non valide");
returnFalse;
if (emailadr == "" || !emailRegex.test (emailadr))
fenêtre.alert ("Veuillez saisir une adresse e-mail valide.");
returnFalse;
if (conactnumber == "" || !télégerex.test (conactnumber))
alert ("numéro de téléphone non valide");
returnFalse;
alert ("formulaire soumis avec des informations correctes");
RetourTrue;
Étape 3: Tester la validation du formulaire
Exécutez le fonctionnement de la validation du formulaire en exécutant le document HTML et en tapant des données aux champs d'entrées. Fournir un nom non valide avec des caractères ou des chiffres spéciaux à l'intérieur
La page Web a invité à l'utilisateur que le nom n'était pas valide.
Essayez à nouveau avec le nom correct et l'adresse e-mail incorrecte:
L'utilisateur a été alerté que l'adresse e-mail n'est pas valide.
Après cela, essayez avec un nom valide et une adresse e-mail valide mais avec un numéro de contact non valide comme:
La page Web a incité l'utilisateur que le numéro de contact n'est pas valide.
Après cela, pour le test final, fournissez toutes les informations correctes comme:
Avec toutes les informations correctes fournies, la validation du formulaire est réussie et l'application Web peut avancer.
Conclusion
La validation du formulaire peut être implémentée sur un formulaire HTML avec JavaScript, des expressions régulières et un peu de construction logique. Des expressions régulières peuvent définir l'entrée correcte acceptée pour un champ. Après cela, l'expression régulière peut être adaptée à la valeur de son champ de saisie respectif à l'aide de la méthode Test (). Cela vaut également pour d'autres types de champs d'entrée, que ce soit pour l'adresse, le code postal ou le nom du pays.