La validation des e-mails est une étape importante lors de la création de formulaires sur des sites Web.

La validation par e-mail est utilisée pour authentifier le nom d’utilisateur, le mot de passe, l’e-mail, le numéro de téléphone, etc.

La validation des e-mails en JavaScript est une partie importante de l’expérience utilisateur d’une application Web.

JavaScript authentifie les informations côté client, ce qui améliore la procédure de traitement des données.

Get 100 Verification For Free

JavaScript est léger et interprété, ce qui le rend beaucoup plus rapide que les autres langages.

Dans cet article, nous allons vous montrer comment valider les emails avec Javascript.

Apprenons à valider les e-mails en JavaScript.

Qu’est-ce que la validation par e-mail ?

image de l’inspecteur de courrier électronique

Validation des e-mails en JavaScript

La validation par e-mail est le processus de vérification des valeurs saisies par l’utilisateur.

La validation des e-mails joue un rôle essentiel dans les applications Web et améliore l’expérience utilisateur globale.

Avec la validation des e-mails, vous pouvez valider les e-mails, les mots de passe, les dates, les numéros de téléphone portable et de nombreux autres champs.

JavaScript est votre gars si vous avez l'habitude de valider les données de formulaire côté client d'une application Web.

Cela accélère le processus de validation grâce à un traitement des données plus rapide par rapport à la validation côté serveur.

Validation des e-mails en JavaScript étapes

La validation des e-mails est un élément essentiel de la validation d’un formulaire HTML.

Un e-mail est une chaîne ou un sous-ensemble de caractères ASCII séparés en deux parties par le symbole @.

La première partie contient des informations personnelles tandis que l’autre contient le nom de domaine sous lequel l’e-mail est enregistré.

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

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

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

  • Points
  • Chiffres
  • Tirets
  • 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 motif du personnage.

Voici quelques exemples d’identifiant de messagerie valide :

Code JavaScript pour valider un identifiant de messagerie

Pour valider les e-mails avec l’expression régulière JavaScript, nous utilisons le fichier /^[email protected][a-zA-Z_]+?.[a-zA-Z] {2,3}$/ regex.

Par exemple, nous écrivons pour affecter le regex à un modèle.

Nous utilisons 'w+ pour faire correspondre n’importe quel mot avant [email protected]'.

[a-zA-Z_]+?.[a-zA-Z] {2,3} correspond à la partie nom d’hôte de l’adresse e-mail.

courriel.js

Ce fichier contient le code JavaScript dont nous avons besoin pour la validation des e-mails. Nous utilisons des expressions régulières pour valider l’e-mail côté client d’une application Web.

Code:

fonction ValidateEmail(input) {

var validRegex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:.[a-zA-Z0-9-] +)*$/;

if (input.value.match(validRegex)) {

alert(« Adresse e-mail valide! »);

document.form1.text1.focus();

renvoyer true;

} else {

alert(« Adresse e-mail non valide! »);

document.form1.text1.focus();

renvoyer false;

}

Définir une expression régulière pour valider l’adresse e-mail

Vérifier si la valeur d’entrée correspond à l’expression régulière

Si cela correspond, envoyez une alerte indiquant « adresse e-mail valide »

Si elle ne correspond pas, envoyez une alerte indiquant « adresse e-mail non valide »

Exemples de validation d’e-mails JavaScript

La validation d’un e-mail est très importante lors de la création de formulaires sur des sites Web.

Une adresse e-mail est divisée en deux parties qui sont séparées à l’aide du symbole « @ ».

Chacune de ces parties se compose d’une combinaison de caractères ASCII.

La partie initiale d’un e-mail désigne principalement les informations personnelles d’un utilisateur et se compose des éléments suivants.

1. Les lettres majuscules (A-Z) ainsi que les lettres minuscules (a-z).

2. Chiffres numériques (0-9).

3. Des caractères spéciaux comme ! # $ % ^ & * _ – = { } | ~.

4. Un point complet (Il ne peut pas s’agir du premier ou du dernier caractère, de plus, vous ne pouvez pas utiliser un point complet consécutivement.)

En outre, le nom de domaine, qui est la partie de l’e-mail qui vient après le symbole @, peut être composé de lettres, de chiffres, de traits d’union et de points.

Get 100 Verification For Free

Dans ce code JavaScript, une expression régulière /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/ est utilisée pour valider un e-mail.

Ensuite, des instructions if/else sont utilisées pour spécifier que si l’utilisateur entre une adresse e-mail valide.

L’utilisateur recevra un message d’alerte pour confirmer l’authenticité de l’adresse e-mail.

Ainsi, si l’utilisateur entre une adresse e-mail non valide, le message d’alerte en informera l’utilisateur.

Exemple 1

Validation des e-mails avec des caractères, des chiffres, des caractères spéciaux, @ et des points.

Code:

<! DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<script type="text/javascript">
fonction checkMyMailAddress(HTMLText) {
var validate = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (HTMLText.value.match(validate)) {
alert(« Le format d’ID de messagerie est approuvé! »);
document.mailForm.mailText.focus();
renvoyer true;
} else {
alert(« Le format d’ID de messagerie n’est pas approuvé! »);
document.mailForm.mailText.focus();
renvoyer false;
}
}
</script>
<titre> Validation par e-mail</titre>
</tête>
<body onload='document.mailForm.mailText.focus()'>
<form name="mailForm » action="#">
Courriel:<br><input type='text' name='mailText' /> <input type="submit »
name="submit » value="Valider »
onclick="checkMyMailAddress(document.mailForm.mailText) » />
</formulaire>
</corps>
</html>

Exemple 2

Validation par e-mail avec @ et point.

Code:

<html>
<corps>
<corps>
<form name="form » method="post » action="# » onsubmit="return getMyEmailValidation();">
E-mail : <input type="text » name="emailAddress"><br/>
<input type="submit » value="Check Email">
</formulaire>
<script>
fonction getMyEmailValidation()
{
var emailValidation=document.form.emailAddress.value;
var [email protected]=emailValidation.indexOf(« @ »);
var indexWithDot=emailValidation.lastIndexOf(« . »);
if ([email protected]<1 || indexWithDot<[email protected]+2 || indexWithDot+2>=emailValidation.length){
alert(« Veuillez vous assurer que l’adresse e-mail contient @ et .com »);
renvoyer false;
}
}
</script>
</corps>
</html>

Exemple 3

Validation des e-mails avec alphabets, chiffres et caractères spéciaux.

Code:

<! DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<titre> Validation par e-mail</titre>
<script type="text/javascript">
fonction emailContainAlphabetsSpecialChars() {
var emailValidationRegularExpression = /^[A-Za-z0-9 ]+$/
Validez la valeur TextBox par rapport au Regex.
var validation = emailValidationRegularExpression.test(document.getElementById(« email »).value);
if (!validation) {
alert(« OK, la validation contient des caractères spéciaux. »);
} else {
alert(« Not Ok, ne contient pas de caractères spéciaux. »);
}
validation du retour;
}
</script>
</tête>
<corps>
Nom:
<input type="text » />
<br />
<br />
<input type="button » value="check Email » onclick="emailContainAlphabetsSpecialChars() » />
</corps>
</html>

Exemple 4

Code:

<! DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<titre> Validation par e-mail</titre>
<script type="text/javascript">
fonction emailContainAlphabetsSpecialChars() {
var emailValidationRegularExpression = /[email protected]+.S+/;
Validez la valeur TextBox par rapport au Regex.
var validation = emailValidationRegularExpression.test(document.getElementById(« email »).value);
if (!validation) {
alert(« Pas une adresse e-mail »);
} else {
alert(« Adresse e-mail valide! »);
}
validation du retour;
}
</script>
</tête>
<corps>
Nom:
<input type="text » />
<br />
<br />
<input type="button » value="check Email » onclick="emailContainAlphabetsSpecialChars() » />
</corps>
</html>

Formulaire HTML pour valider une adresse e-mail

Dans le code HTML, voici un champ de saisie pour valider un email.

Code:

<! DOCTYPE html>

<html>

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

<div>

<h3 class="h3">Entrez votre adresse e-mail</h3>

<form name="form1 » action="#">

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

<br>

<input type="submit » name="submit » value="Submit » onclick="validateEmail(document.form1.text1)"/>

</formulaire>

</div>

<script src="email-validation.js"></script>

</corps>

</html>

Formulaire CSS pour valider une adresse e-mail

Voici quelques CSS de base pour styliser les éléments HTML.

Code:

.h3 {

marge-gauche: 38px;

}

entrée {

taille de police: 20pX;

}

entrée:focus, zone de texte:focus

{

couleur de fond: blanc fumé;

}

entrée soumettre {

taille de police: 12px;

}

Si vous recherchez un excellent service de validation d’e-mails, vous pouvez essayer Email Inspector gratuitement dès aujourd’hui. Faites vérifier vos 100 premières adresses e-mail par un professionnel et découvrez combien de faux comptes vous avez sur votre liste!

Get 100 Verification For Free