Comment valider le formulaire de messagerie à côté du client en javascript

Si vous souhaitez soumettre des données au serveur, le double de vérification du format des données à soumettre est nécessaire. Ce processus est appelé Validation du formulaire côté client. La validation du formulaire côté client garantit que les données soumises répondent aux critères spécifiés dans les contrôles de formulaire.

Du côté client, e-mails Les formulaires sont validés pour rattraper des données non valides afin que l'utilisateur puisse les corriger immédiatement. Dans d'autres cas, si des données non valides sont soumises au serveur, elles seront rejetées et le serveur correspondant le renverra au client.

Cet article discutera validation formulaire de messageries sur côté client dans Javascrip. Alors, commençons!

Comment valider le formulaire de messagerie à côté du client en javascript

Un e-mail comprend un «chaîne,«Qui est représenté comme un sous-ensemble de caractères ASCII, séparés en deux parties en utilisant le«@" symbole. Il peut être écrit comme «UserInfo @ Domain", où "informations utilisateur"Les informations privées de l'utilisateur sont. La longueur du «informations utilisateur"La partie ne devrait pas être plus que 64 personnages, tandis que le domaine le nom peut avoir 253 personnages.

Le "informations utilisateur«La partie peut inclure les caractères ASCII-donnés:

• Nombres de 0 pour 9.
• Majuscule (A-Z) et minuscules (A-Z) Lettres anglaises.
• Caractères spéciaux tels que ~ _ '/ ? - + = ^ | $ * ' ! & #%
• Vous pouvez également ajouter un caractère d'époque ".", Mais ce ne devrait pas être le premier et le dernier caractère de la partie" UserInfo "et ne le répétez pas après l'autre.

Le nom de domaine spécifié dans l'adresse e-mail, tels que Org, Info, Net, Com, US, peut contenir des chiffres, des lettres, des traits de volonté et un arrêt complet.

Découvrez ci-dessous quelques exemples d'identifices de messagerie valides et non valides:

Exemples de format de messagerie valide

• userInfo @ galaxy.com
• nom @ galaxy.org
• votre website @ a.nom.filet

Exemples de format de messagerie non valide

• galaxie.com ("@"Le caractère n'est pas ajouté)
• votre webiste @.com.Nom (le domaine de haut niveau ne peut pas commencer par ".»)
• userInfo @ gmail.un (".un«N'est pas un domaine de niveau supérieur valide)
• .userInfo @ galaxy.org (ne démarrez pas d'identité par e-mail avec "." personnage)
• @n'importe quel.domaine.filet ("informations utilisateur"La partie manque avant le"@" personnage )

Maintenant, nous allons démontrer un exemple pratique lié au formulaire de validation par e-mail dans JavaScript.

Exemple: valider le formulaire de messagerie du côté client en javascript
Tout d'abord, nous créerons une forme côté client ayant un «saisir”Champ pour entrer dans l'identifiant de messagerie et un«Soumettre”Bouton pour vérifier le format de messagerie:

Veuillez saisir votre adresse e-mail

Expression régulière pour valider le formulaire de messagerie du côté client en JavaScript

En javascript, Expressions régulières sont l'une des méthodes les plus utiles utilisées pour valider le format de messagerie. Ils représentent un caractère de modèle qui est comparé à l'entrée utilisateur.

Dans notre fichier JavaScript, nous ajouterons l'expression régulière suivante pour valider l'ID de messagerie entré par l'utilisateur:

MailFormat = / ^ \ W + ([\.-]]?\ w +) * @ \ w + ([\.-]]?\ w +) * (\.\ w 2,3) + $ /;

L'expression régulière donnée ci-dessus vous permet d'ajouter des lettres en majuscules (A-Z) et en minuscules (A-Z), chiffres (0-9), période ".»Et des caractères spéciaux tels que ~ _ '/ ? - + = ^ | $ * ' ! & #%, dans l'ID de messagerie.

Nous allons créer un «Email validé()«Fonction dans JavaScript, qui prendra«Texte de saisie"Comme argument. Après cela, nous stockons l'expression régulière mentionnée dans le «MailFormat". L'ajout "MailFormat"Est ensuite comparé à l'entrée utilisateur. Si l'ID e-mail entré a un format valide, une alerte apparaîtra à l'écran avec la chaîne "Vous avez entré une adresse e-mail valide!". Sinon, cela vous fera savoir que l'ID de messagerie n'est pas valide:

fonction valideMail (inputText)
var MailFormat = / ^ \ W + ([\.-]]?\ w +) * @ \ w + ([\.-]]?\ w +) * (\.\ w 2,3) + $ /;
if (inputText.valeur.match (MailFormat))
alerte ("Vous avez entré une adresse e-mail valide!");
document.formulaire 1.texte 1.se concentrer();
Retour Vrai;

autre
alert ("adresse e-mail non valide");
document.formulaire 1.texte 1.se concentrer();
retourne false;

Nous avons également défini le style HTML Elements pour améliorer leur apparence sur le formulaire de validation des e-mails:

Maintenant, nous allons ouvrir notre "indice.html ” fichier avec l'aide de VS Code "Serveur en direct" extension:

Voici le formulaire de validation par e-mail avec un champ de saisie et un bouton Soumettre:

Pour la première fois, nous saisirons un identifiant de messagerie valide et:

Après avoir cliqué sur le "Soumettre”Bouton, une boîte d'alerte apparaît sur notre page Web, qui indique que l'adresse e-mail saisie est valide:

Maintenant, pour vérifier un e-mail non valide, nous rédigerons un e-mail ayant un format non valide, puis cliquez sur le bouton Soumettre:

Vous pouvez voir que notre formulaire de validation des e-mails fonctionne parfaitement pour valider l'identification de l'e-mail en fonction du format spécifié.

Conclusion

À l'aide de JavaScript, vous pouvez valider les formulaires de messagerie à côté du client. Le formulaire de validation par e-mail créé est basé sur les besoins des utilisateurs, tels que l'autorisation d'expressions régulières, l'acceptation uniquement des caractères et des chiffres dans l'identification de l'e-mail, ou d'autoriser uniquement des domaines spécifiques. La validation des formulaires de messagerie aide également à soumettre des informations correctes et précieuses au serveur. Cet article a discuté de la procédure de validation des formulaires de messagerie à côté du client en JavaScript à l'aide d'exemples appropriés.