web-dev-qa-db-fra.com

Attribut de modèle d'entrée de courrier électronique HTML5

J'essaie de créer un formulaire html5 contenant une entrée de courrier électronique, une entrée de case à cocher et une entrée de soumission. J'essaie d'utiliser l'attribut de modèle pour l'entrée de courrier électronique, mais je ne sais pas quoi placer dans cet attribut. Je sais que je suis censé utiliser une expression régulière qui doit correspondre à la production de modèles JavaScript, mais je ne sais pas comment procéder.

Ce que j'essaie d'obtenir de cet attribut est de vérifier que l'e-mail contient un @ et au moins un ou plusieurs points et, si possible, de vérifier si l'adresse après le @ est une adresse réelle. Si je ne peux pas faire cela via cet attribut, je vais envisager d'utiliser JavaScript, mais pour vérifier si un @ et un ou plusieurs points, je veux utiliser l'attribut pattern à coup sûr.

l'attribut pattern doit vérifier:

  1. seulement un @
  2. un ou plusieurs points
  3. et si possible vérifier si l'adresse après le @ est une adresse valide

Une alternative à celle-ci est d'utiliser un JavaScript, mais pour toutes les autres conditions, je ne souhaite pas utiliser de JavaScript.

html5html-emailemail-validationhtml-input
39
Colton

C'est un problème double (comme beaucoup dans le monde entier).

Vous devez évaluer si le navigateur prend en charge le langage HTML 5 (j'utilise Modernizr pour le faire). Dans ce cas, si vous avez un formulaire normal, le navigateur fera le travail pour vous, mais si vous avez besoin d'ajax/json (comme beaucoup de cas quotidiens), vous devez quand même effectuer une vérification manuelle.

.. alors, ma suggestion est d'utiliser une expression régulière pour évaluer à tout moment avant de soumettre. L'expression que j'utilise est la suivante:

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

Celui-ci est tiré de http://www.regular-expressions.info/ . C'est un monde difficile à comprendre et à maîtriser, je vous suggère donc de lire attentivement cette page.

40
Alwin Kesler

J'ai eu ce problème exact avec l'entrée de courrier électronique HTML5, en utilisant la réponse Alwin Keslers ci-dessus, j'ai ajouté la regex à l'entrée de courrier électronique HTML5 afin que l'utilisateur doive avoir quelque chose à la fin.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
60
Stephen

En HTML5, vous pouvez utiliser le nouveau type "email": http://www.w3.org/TR/html-markup/input.email.html

Par exemple:

<input type="email" id="email" />

Si le navigateur implémente HTML5, il s'assurera que l'utilisateur a entré une adresse électronique valide dans le champ. Notez que si le navigateur n'implémente pas HTML5, il sera traité comme un type de texte, c'est-à-dire:

<input type="text" id="email" />
23
Anthony

Malheureusement, toutes les suggestions, sauf celles de B-Money, ne sont pas valables dans la plupart des cas.

Voici beaucoup d'emails valides comme:

  • gü[email protected] (tréma allemand)
  • антон@россия.рф (russe, рф est un domaine valide)
  • chinois et de nombreuses autres langues (voir par exemple Courriel international et spécifications liées).

En raison de la complexité de la validation, je propose une solution très générique:

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

Il vérifie si le courrier électronique contient au moins un caractère (également un chiffre ou autre, sauf un autre "@" ou un espace) avant "@", au moins deux caractères (ou autre, sauf un autre "@" ou un autre espace) après "@" et un point dans entre. Ce modèle n'accepte pas les adresses telles que lol @ company, parfois utilisées dans les réseaux internes. Mais celui-ci pourrait être utilisé, si nécessaire:

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

Les deux modèles acceptent également les courriels moins valides, par exemple les courriers avec onglet vertical. Mais pour moi c'est assez bon. Des vérifications plus strictes, telles que la tentative de connexion au serveur de messagerie ou au domaine ping, doivent quand même être effectuées côté serveur.

BTW, je viens d'écrire angular (pas encore bien testée) pour la validation du courrier électronique avec novalidate et sans utiliser le modèle ci-dessus pour prendre en charge le principe DRY:

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

Usage:

<input type="text" is-email />

Pour le motif B-Money, le motif "@" suffit. Mais il décline deux ou plus "@" et tous les espaces.

22
Anton Bessonov

C'est l'approche que j'utilise et vous pouvez la modifier en fonction de vos besoins:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

Explication:

  1. Nous voulons nous assurer que l'adresse e-mail commence toujours par un mot:

    ^ [\ w]

Un mot est un caractère, un chiffre ou un trait de soulignement. Vous pouvez utiliser le modèle [a-zA-Z0-9_], mais il vous donnera le même résultat et sera plus long.

  1. Ensuite, nous voulons nous assurer qu’il existe au moins un tel caractère:

    ^ [\ w] {1,}

  2. Ensuite, nous voulons autoriser tous les mots, chiffres ou caractères spéciaux dans le nom. De cette façon, nous pouvons être sûrs que l'e-mail ne commence pas par le point, mais peut contenir le point autre que la première position:

    ^ [\ w] {1,} [\ w. + -]

  3. Et bien sûr, il n’est pas nécessaire qu’il en soit ainsi car l’adresse e-mail ne peut contenir qu’une lettre suivie de @:

    ^ [\ w] {1,} [\ w. + -] {0,}

  4. Ensuite, nous avons besoin du caractère @ qui est obligatoire, mais il ne peut y avoir qu'un seul dans tout l'e-mail:

    ^ [\ w] {1,} [\ w. + -] {0,} @

  5. Juste derrière le caractère @, nous voulons le nom de domaine. Ici, vous pouvez définir le nombre minimum de caractères que vous souhaitez et de quelle plage de caractères. Je choisirais tous les caractères Word, y compris le trait d'union [\ w -] et j'en veux au moins deux {2,} . Si vous souhaitez autoriser des domaines tels que t.co , vous devez autoriser un caractère de cette plage {1 ,} :

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,}

  6. Ensuite, nous devons traiter deux cas. Soit il n'y a que le nom de domaine suivi de l'extension de domaine, ou le nom de sous-domaine suivi du nom de domaine suivi de l'extension, par exemple abc.com contre abc.co.uk . Pour que cela fonctionne, nous devons utiliser le jeton (a | b) où a représente le premier cas, b représente le deuxième cas et | représente un OU logique. Dans le premier cas, nous ne traiterons que l'extension de domaine, mais comme elle sera toujours présente quel que soit le cas, nous pouvons l'ajouter en toute sécurité aux deux cas:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [A-zA-Z] {2,})

Ce modèle indique qu'il faut exactement un caractère de point suivi de lettres, sans chiffres, et nous en voulons au moins deux, dans les deux cas.

  1. Dans le second cas, nous allons ajouter le nom de domaine devant l'extension de domaine, faisant ainsi du nom de domaine d'origine un sous-domaine:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [\ w -] {2,} [.] [a-zA-Z] {2,})

Le nom de domaine peut être composé de caractères Word, y compris le trait d'union. Encore une fois, nous voulons ici au moins deux caractères.

  1. Enfin, nous devons marquer la fin du schéma complet:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [\w -] {2,} [.] [a-zA-Z] {2,}) $

  2. Allez ici et testez si votre adresse e-mail correspond au modèle: https://regex101.com/r/374XLJ/1

7
Jan Zavrel
<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

Ceci est une version modifiée de la solution ci-dessus qui accepte également les majuscules.

6
Vikrant Shitole

J'ai utilisé après Regex pour satisfaire pour les emails suivants.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Code

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />
4
Abibullah Rahamathulah

Une solution supplémentaire qui repose sur la spécification w3org.
La regex originale provient de w3org .
Le dernier " * quantificateur paresseux" de cette expression régulière a été remplacé par " + Un ou plusieurs quantificateurs ".
Un tel modèle est parfaitement conforme à la spécification, à une exception près: il n'autorise pas les adresses de domaine de premier niveau telles que " foo @ com "

<input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="[email protected]"
    placeholder="[email protected]"
    required>
3
Artem Bozhko

Vous voulez probablement quelque chose comme ça. Notez les attributs:

  • champs obligatoires
  • type = email
  • autofocus
  • modèle

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*" />

3
B-Money
<input type="email" name="email" id="email" value="" placeholder="Email" required />

documentation http://www.w3.org/TR/html-markup/input.email.html

3
Ashley Stuart

Réponse 2018 mise à jour

Allez ici http://emailregex.com/

Javascript:

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

2
imnickvaughn

Si vous ne voulez pas écrire de livre blanc sur les normes de messagerie, utilisez mon exemple suivant, qui présente simplement un attribut CSS bien connu (text-transform: lowercase) pour résoudre le problème:

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." title="please enter a valid email" />
1
Manifest Man
^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$
0
Saurabh Chauhan

J'ai testé la regex suivante qui donne le même résultat que Chrome validation d'entrée email par HTML.

[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*

Vous pouvez le tester sur ce site: regex101

0
Yang Zhang