oujood.com

JavaScript : Formulaire HTML - validation de l'email la fonction checkEmail()

La validation de l'email est un point capital lors de la validation d'un formulaire HTML. Dans ce document, nous allons voir comment javascript peut permettre de valider un email

chercher |

Validation de l'email

Un email est une chaîne (un sous-ensemble de caractères ASCII) séparée en deux parties par le symbole @. un " info_personnelle " et un domaine, c'est-à-dire info_personnelle@domaine. La longueur de la partie info_personnelle peut aller jusqu'à 64 caractères et le nom de domaine peut aller jusqu'à 253 caractères.

La partie info personnelle contient les caractères ASCII suivants.
Lettres anglaises majuscules (A-Z) et minuscules (a-z).
Chiffres (0-9).
Caractères ! # $ % & ' * + - / = ? ^ _ ` { | } ~
Caractère . ( point, point ou point final) à condition qu'il ne soit pas le premier ou le dernier caractère et qu'il ne vienne pas l'un après l'autre.
La partie du nom de domaine (tld) [par exemple com, org, net, in, us, info] contient des lettres, des chiffres, des traits d'union et des points.

Exemple d'e-mail valide

monsite@notreTerre.com
mon.nom@monsite.org
monsite@vous.moi.net

Exemple d'adresse électronique invalide

monsite.notreTerre.com [le @ est absent].
monsite@.com.moi [ tld (domaine de premier niveau) ne peut pas commencer par un point "."]
@vous.moi.net [ Aucun caractère avant @ ]
monsite123@gmail.b [ ".b" n'est pas un tld valide]
monsite@.org.org [ le tld ne peut pas commencer par le point "."]
.monsite@mysite.org [ un email ne doit pas commencer par un "."]
monsite()*@gmail.com [ ici, l'expression régulière n'autorise que les caractères, les chiffres, les traits de soulignement et les tirets ].
monsite..1234@yahoo.com [ le double points n'est pas autorisés]

Code javaScript pour valider une adresse e-mail

Code

📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
<title>JavaScript form validation email</title>
<style>
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
input {
font-size: 20pt;
margin: 10px 20px;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style> 
<script>
function checkEmail()
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(form1.text1.value.match(mailformat))
{
return true;
}
else
{
alert("Vous avez saisi une adresse électronique non valide !");
document.form1.text1.focus();
return false;
}
}
</script>    
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<form name="form1" action="#"> 
<ul>
<li>
<label>Votre adresse mail : </label><input type='text' name='text1' onchange="checkEmail(document.form1.text1)"  ></li>
<li><label>Votre téléphone : </label><input type='text' name='telephone' ></li>
<li class="submit"><input type="submit" name="submit" value="Envoyer" onclick="checkEmail()"/></li>
<li> </li>
</ul>
</form>
</div>
</body>
</html>

Dans ce code nous avons utilisé l’événement onload dans la balise body qui donne le focus au champ de saisie de l’email.
Puis nous avons la fonction checkEmail(), qui va vérifier la forme de l’adresse email saisie, si vous ne changez pas le contenu ou si vous saisissez une adresse valide rien ne se passe et vous pouvez continuer. Si non donc vous avez changé le contenu en saisissant une adresse mail dont la forme est invalide le message apparait dés que vous quittez le champ de saisie de l’email.
Nous avons aussi fait appel à l’événement onclick qui se déclenche lorsque vous envoyez le formulaire.


Voir aussi nos tutoriel :

fonction setlocale

Modifie les informations de localisation

Balise audio

Définit le contenu de son

Alignement texte en css

La propriété CSS qui sert pour aligner du texte et contrôler ses propriétés pour les alignements : gauche, centré, droite et justifié est text-align...