Accueil > javascript > verifier-adresse-email-javascript

{ Vérifier la sytnaxe de l'email dans un champ }

Introduction

Que ce soit pour un formulaire de contact, un formulaire d'inscription ou de commande, il est très important de vérifier les données que les utilsateurs vont vous envoyer pour deux grandes raisons :

  • Empêcher les utilisateurs ne remplir le champ avec autres chose que ce à quoi il est destiné (une adresse email)

  • Eviter les failles de sécurité sur les formulaires

Il également important de rappeler que l'utilisateur peut, sans le vouloir, se tromper de champ et écrire son adresse postale dans le champ prévu pour l'email et ne rien remarquer si aucun message ne l'avertit pas de son erreur.

En bref, les vérifications sur les différents champs (en l'occurence le champ email) est quasiment obligatoire et fait partie des principes de bases que nous devrions tous appliquer à nos formulaire.

Le principe

Le principe est vraiment simple : une adresse email est toujours composée comme suit :

xxxxxxxx@xxxxxxxx.com (ou .ch ou autre)

Voilà ce que notre fonction Javascript devra vérifier !

C'est parti !

Le code de vérification :

<script type="text/javascript" language="javascript">
<!--

function VerifMail()
{
	a = document.Verif.Mail.value;
	valide1 = false;
	for(var j=1;j<(a.length);j  ) {
		if(a.charAt(j)=='@') {
			if(j<(a.length-4)) {
				for(var k=j;k<(a.length-2);k  ) {
					if(a.charAt(k)=='.') valide1=true;
				}
			}
		}
	}
	
	if(valide1==false) { 
		alert("Veuillez saisir une adresse email valide.");
	return valide1;
	}

//-->
</script>

Le code html de votre input

Remarquez que juste un input tout seul ne suffit pas, il faut l'envelopper d'une balise form dont le nom sera Verif, dont la méthode sera post (ce qui signifie qu'on va envoyer les données) et enfin de onSubmit="return VerifMail();" (qui va appeler la fonction VerifMail() lorsqu'on cliquera sur le bouton submit) d'ou le nom de l'évemenent onSubmit.

N'oubliez pas de donner l'id Mail à votre input afin que la fonction Javascript sache ou se trouve le champ concerné.

<form id="Verif" name="Verif" method="post" onSubmit="return VerifMail();" >

 <input name="Mail" type="text" id="Mail" value="Tester une adresse email" size="35" >

 <input type="submit" value="Envoyer" name="submit" />
 </form>

Voilà ! Une fois que vous avez placé la fonction Javascript dans l'en-tête de votre page (ou juste au dessus de votre formulaire). Vous pouvez l'utiliser. Test-it !

Exemple