Comment faire la validation des e-mails en JavaScript ? [Avec exemples]

Publié: 2021-02-23

JavaScript est un langage de programmation conçu pour créer des applications. Il est beaucoup plus rapide que les autres langages car il est si léger et facile à utiliser. Il est utilisé pour créer des applications bien conçues.

La validation des e-mails en JavaScript est importante pour l'expérience utilisateur lors de la création d'applications Web. La validation aide à transmettre des informations valides à un serveur à partir du client de l'application Web.

Table des matières

Qu'est-ce que Valider ?

La validation fait référence au processus d'examen des valeurs saisies par l'utilisateur. Il joue un rôle crucial dans la création d'applications et améliore l'expérience utilisateur. De nombreux champs, tels que les numéros de téléphone portable, les e-mails, les dates et les mots de passe, sont validés via ce processus.

JavaScript rend le processus de validation plus rapide en raison de son traitement plus rapide des données que les autres validations côté serveur. Voyons maintenant l'implémentation de la validation des e-mails en JavaScript .

Validation des e-mails en JavaScript

La validation des e-mails est l'une des parties essentielles de l'authentification d'un formulaire HTML. Le courrier électronique est un sous-ensemble ou une chaîne de caractères ASCII, divisé en deux parties à l'aide du symbole @. Sa première partie est constituée d'informations privées et la seconde contient le nom de domaine dans lequel un e-mail est enregistré.

Voici les caractères ASCII de la première partie :

  • Les caractères spéciaux tels que # * + & ' ! % @ ? { ^ } ”
  • Caractères numériques (0 à 9)
  • Point, point, etc., ayant pour condition qu'il ne peut pas s'agir de la dernière ou de la toute première lettre de l'e-mail et qu'il ne peut pas être répété après un autre.
  • Alphabets majuscules (A à Z) et alphabets minuscules (a à z)

La deuxième partie comprend les éléments suivants :

  • Points
  • Chiffres
  • Traits d'union
  • Des lettres

L'utilisation d'expressions régulières est l'un des meilleurs moyens de validation des e-mails en JavaScript . Il utilise des expressions régulières pour définir le modèle du personnage.

Quelques exemples d'identifiant de messagerie valide :

Quelques autres exemples d'identifiant de messagerie invalide

  • [email protected] (les points superposés ne sont pas autorisés)
  • Inownzsite()&@abcd.com (seuls les caractères, les tirets, les traits de soulignement et les chiffres sont autorisés dans l'expression régulière.)
  • Ourwebsiteismne.azbyz.com (ici le symbole @ n'est pas là)
  • [email protected] (Ici, le domaine de premier niveau ne peut pas commencer par un point)
  • @youmenandwe.we.net (ici, il ne peut pas commencer par le symbole @)
  • [email protected] (".b" n'est pas un domaine de premier niveau valide)email.js

Le fichier se compose d'un code JavaScript requis pour la validation de l'e-mail. Ici, les expressions régulières sont utilisées pour valider un e-mail côté client d'une application.

Points de contrôle pour une validation efficace des e-mails dans le code JavaScript :

  • Décrire une expression régulière pour valider une adresse email
  • Si une valeur d'entrée correspond à des expressions régulières
  • Si cela correspond, envoie l'alerte disant "l'adresse e-mail est valide".
  • S'il ne correspond pas, envoyez l'alerte en disant "l'adresse e-mail n'est pas valide".

En relation : Validation du mot de passe en Javascript

Code de validation d'e-mail en JavaScript

Vous trouverez ci-dessous le code de validation de l'e-mail en JavaScript. Ce code peut valider si l'email créé ou saisi par l'utilisateur est valide ou non. Enregistrez le fichier sous filename.js.

// Extrait de code

fonction EmailValidation(Email saisi)

{

var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

if(enteredEmail.value.match(enteredEmail))

{

alert("Ouais ! un e-mail valide !" );

document.form1.text1.focus();

retourner vrai ;

}

Autre

{

alert("Désolé ! un e-mail invalide !");

document.form1.text1.focus();

retourner faux ;

}

}

La fonction JavaScript est utilisée dans le formulaire HTML comme ci-dessous. Enregistrez le fichier sous nomfichier.html :

<!DOCTYPE html>

<html lang="fr">

<tête>

<meta charset= »utf-8″>

<title>validation des e-mails en JavaScript</title>

<link rel='stylesheet' href='form-style.css' type='text/css' />

</head>

<body onload='document.form1.text1.focus()'>

<div class="mail">

<h2>Entrez l'e-mail de validation</h2>

<form name=”form1″ action=”#”>

<ul>

<li><input type='text' name='text1'/></li>

<li> </li>

<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>

<li> </li>

</ul>

</form>

</div>

<script src="filename.js"></script>

</body>

</html>

Le code suivant peut ajouter du style au formulaire en utilisant CSS. Enregistrez le fichier sous nomfichier.css.

li {type de style de liste : aucun ;

taille de police : 16 pt ;

}

.courrier {

marge : automatique ;

rembourrage en haut : 20 px ;

rembourrage en bas : 20 px ;

largeur : 850 pixels ;

arrière-plan : rgb(150, 195, 208);

bordure : 1px sold rvb(1, 20, 24) ;

}

.mail h2 {

marge gauche : 36 px ;

}

contribution {

taille de police : 28 pt ;

}

entrée : mise au point, zone de texte : mise au point {

couleur de fond : blanc ;

}

entrée soumettre {

taille de police : 18 pt ;

}

Vous pouvez maintenant exécuter le code HTML et obtenir la validation de l'e-mail en JavaScript .

Lire : Projets Javascript dans GitHub

Apprenez des cours de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Conclusion

La validation des e-mails est très cruciale pour éviter de créer des adresses e-mail invalides. Dans cet article, il est expliqué, avec le code, de valider si un identifiant email est valide ou non et de laisser le système vérifier et notifier l'utilisateur si l'identifiant email saisi n'est pas valide.

Si vous souhaitez en savoir plus sur le développement full-stack, consultez le programme Executive PG de upGrad & IIIT-B en développement logiciel full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations. , statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Décrochez le job de vos rêves

Postulez maintenant pour le programme Executive PG en développement Full Stack