Pattern des input mail ou comment vérifier les mails en html5

Attention, cet article date de 9 ans, les informations peuvent ne plus être à jour...

Alors, pour ceux qui n’ont rien compris au titre, je vais faire simple : un « pattern » c’est une expression de code (expression régulière) que vous créez et qui sert à vérifier si ce que l’on a entré dans le champs (ici pour un mail) est bien de la forme monmail@exemple.com (par exemple).

Le code est le suivant : https://jsfiddle.net/cgh7ndup/

On crée un objet de type champs (« input ») qui est lui-même de type email (« type=email ») que l’on nomme email (« name=email ») sur lequel on inscrit un exemple de ce que l’on attend (« placeholder= ex: mail@monmail.com ») et qui doit être obligatoirement complété (« required »).
Si on laisse les paramètres par défaut et que vous écrivez ce mail : test@
puis que vous enlevez le curseur du champs (en cliquant ailleurs sur la page), ce dernier doit s’entourer de rouge, vous indiquant que votre mail est faux (et il l’est, « test@ » n’est pas un mail valide).

En revanche, si vous indiquez le mail suivant : test@test
Et que vous enlevez là aussi le curseur du champs, cette fois-ci le champs ne devient plus rouge alors que votre mail n’est pas exact puisqu’il manque le suffixe/la fin (.fr, .com, etc) (donc comportement anormal de la détection).

Essayez :


Et c’est ce qui rend fort intéressant le pattern !

Ce qui m’étonne encore c’est pourquoi cette « erreur » n’a pas été corrigé depuis le temps, à croire que personne ne s’en est rendu compte…

Pour corriger ça, je vous propose d’ajouter le pattern suivant dont je me servais sur Pluxml et pour lequel je n’ai pas eu de problème.
Le voici : pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z.]{2,15}"

Alors, comment ça se lit ?

On dit qu’avant le « @ », on accepte toutes les lettres minuscules et majuscules et qu’en plus, on accepte les points, les tirets et les tirets bas (underscore, touche 8 du clavier).
Puis après le « @ » on accepte toutes les lettres, des points et des tirets/tirets bas.
Puis pour le suffixe, on impose une limite de caractères (seulement des lettres et dont le nombre varie de 2 à 10 lettres) (ça marche donc aussi pour le « .co.uk » des Anglais).

Vous pouvez essayer de compléter avec un « test@test » et ça ne marchera pas cette fois ;)

Essayez :

http://jsfiddle.net/ueLm7e1h/

 

 

— — —
Je rajoute une vidéo de Grafikart.fr, qui fait de très bonnes vidéos sur le web design je trouve :

3 avis sur l'article “Pattern des input mail ou comment vérifier les mails en html5”

  1. Knah Tsaeb dit :

    Merci pour cette expression, qui peut en aider certains.
    Mais attention toutefois, si on respecte les RFC (résumé très rapidement sur Wikipedia https://fr.wikipedia.org/wiki/Adresse_%C3%A9lectronique), une adresse mail peut contenir presque n’importe quel caractère. Dans les faits, peut de serveur accepte des adresses avec des caractère spéciaux. Néanmoins dans Postfix, un serveur mail très utilisé sous Linux, il existe un caractère de délimitation le caractère « + ». Je pense qu’il est intéressant de ne pas bloquer ce caractère que certains utilisateur utilisent.

    • Lokoyote dit :

      @Knah Tsaeb :

      Ah merci, en effet je ne connaissais pas et je ne l’ai jamais vu.
      Comme dans 99% des cas le « + » n’est pas accepté je ne l’ai pas intégré, mais après tout, pourquoi le « – » et pas le « + » ? :)

  2. Pipo dit :

    Bonjour,
    Pour ceux qui cherche encore, le pattern proposé est incorrect, et bizarrement il a été recopié et re-publié des centaines de fois…
    Un point « . » ou d’ailleurs d’autres caractères (+), à l’intérieur des accolades [ ] est juste le caractère « . », mais à l’extérieur « . » = « n’importe quel caractère »
    Ce qui veut dire que pour le pattern annoncé « nom@domain »… est accepté, tout comme « nom@domain/truc », « nom@truc;mec », etc seront acceptés (« . »=tout caractère)
    (Ce qui est bizarre aussi, c’est qu’en HTML5, le « input type=email required », conserve cette même erreur ?)

    le bon pattern serait: [a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z.]{2,15}
    (un slash inversé devant le point pour signifier le caractère « . »)
    En fait un meilleur pattern serait:
    [a-zA-Z0-9._%+-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,4}$
    $=obligatoirement terminé par 2 lettres (maxi 4)
    .co.uk = OK aussi (le premier « . » est accepté par l’occurrence précédente).
    % ou + à l’intérieur des accolades = aux caractères % et +
    A noter « – » est une marque d’intervalle, sauf lorsque placé en dernier = au caractère « -« 

Répondre à Pipo Annuler la réponse

Votre adresse de messagerie ne sera pas publiée.

Possibilité d'ajouter une balise de SPOILER via la syntaxe suivante :
[spoiler] Texte à cacher [/spoiler]