Question Comment valider une adresse email en JavaScript?


Comment une adresse email peut-elle être validée en JavaScript?


3244


origine


Réponses:


En utilisant expressions régulières est probablement le meilleur moyen. Vous pouvez voir un tas de tests ici (pris à partir de chrome)

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    return re.test(String(email).toLowerCase());
}

Voici l'exemple d'expression régulière qui accepte unicode:

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

Mais gardez à l'esprit qu'il ne faut pas compter uniquement sur la validation JavaScript. JavaScript peut facilement être désactivé. Cela devrait également être validé côté serveur.

Voici un exemple de ce qui précède en action:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\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,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>


3779



Juste pour l'exhaustivité, ici vous avez une autre regex RFC 2822 conforme

La norme officielle est connue sous le nom de RFC 2822. Il décrit la syntaxe que les adresses e-mail valides doivent respecter. Vous pouvez (mais tu ne devrais pas - continuer à lire) l'implémente avec cette expression régulière:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

(...) Nous obtenons une implémentation plus pratique du RFC 2822 si nous omettons la syntaxe en utilisant des guillemets doubles et des crochets. Il correspondra toujours à 99,99% de toutes les adresses e-mail actuellement utilisées.

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

Un autre changement que vous pourriez faire est de permettre n'importe quel domaine de premier niveau de code de pays à deux lettres, et seulement des domaines génériques de premier niveau spécifiques. Cette regex filtre les adresses e-mail factices comme asdf@adsf.adsf. Toi devra le mettre à jour lorsque de nouveaux domaines de premier niveau seront ajoutés.

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b

Donc, même en suivant les normes officielles, il y a encore des compromis à faire. Ne copiez pas aveuglément des expressions régulières à partir de bibliothèques en ligne ou de forums de discussion. Testez-les toujours sur vos propres données et avec vos propres applications.

Accentuation mine


609



J'ai légèrement modifié la réponse de Jaymon pour les gens qui veulent une validation vraiment simple sous la forme de:

anystring@anystring.anystring

L'expression régulière:

/\S+@\S+\.\S+/

Exemple de fonction JavaScript:

function validateEmail(email) 
{
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

548



Il y a quelque chose que vous devez comprendre à la seconde où vous décidez d'utiliser une expression régulière pour valider les emails: Ce n'est probablement pas une bonne idée. Une fois que vous avez compris cela, il y a beaucoup d'implémentations qui peuvent vous permettre d'y arriver à mi-chemin, cet article les résume bien.

En bref, cependant, la seule façon d'être absolument, positivement sûr que ce que l'utilisateur a entré est en fait un e-mail est d'envoyer un e-mail et de voir ce qui se passe. A part ça, tout est juste deviné.


292



Wow, il y a beaucoup de complexité ici. Si tout ce que vous voulez faire est d'attraper les erreurs de syntaxe les plus évidentes, je ferais quelque chose comme ceci:

\S+@\S+

Il capture généralement les erreurs les plus évidentes que fait l'utilisateur et assure que le formulaire est la plupart du temps correct, ce qui est la raison de la validation JavaScript.


280



HTML5 lui-même a la validation d'email. Si votre navigateur prend en charge HTML5, vous pouvez utiliser le code suivant.

<form><input type="email" placeholder="me@example.com">
    <input type="submit">
</form>

jsFiddle lien

Du Spécification HTML5:

UNE Adresse e-mail valable est une chaîne qui correspond à la emailla production de l'ABNF suivant, dont le jeu de caractères est Unicode.

email   = 1*( atext / "." ) "@" label *( "." label )
label   = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext   = < as defined in RFC 5322 section 3.2.3 >
let-dig = < as defined in RFC 1034 section 3.5 >
ldh-str = < as defined in RFC 1034 section 3.5 >

Cette exigence est un violation volontaire de RFC 5322, qui définit une syntaxe pour les adresses e-mail qui est à la fois trop stricte (avant le caractère "@"), trop vague (après le caractère "@"), et trop laxiste (commentaires, caractères d'espaces et cordes de manières méconnues à la plupart des utilisateurs) pour être d'une utilisation pratique ici.

L'expression régulière compatible JavaScript et Perl suivante est une implémentation de la définition ci-dessus.

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

165



J'ai trouvé que c'était la meilleure solution:

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

Il permet les formats suivants:

1. prettyandsimple@example.com
2. very.common@example.com
3. jetable.style.email.with+symbol@example.com
4. other.email-with-dash@example.com
9. #!$%&'*+-/=?<_`{}|~@example.org
6. "() []:,; @ \\\"! # $% & '* + - / =? ^ _ `{} | ~ .a "@ example.org
7. "" @ example.org (espace entre les guillemets)
8. üñîçøðé@example.com (caractères Unicode dans la partie locale)
9. üñîçøðé@üñîçøðé.com (caractères Unicode dans la partie domaine)
10. Pelé@example.com (Latin)
11. δοκιμή@παράδειγμα.δοκιμή (en grec)
12. 我 買 @ 屋企. 香港 (Chinois)
13. 甲 斐 @ 黒 川. 日本 (Japonais)
14. чебурашка@ящик-с-апельсинами.рф (cyrillique)

Il est clairement polyvalent et permet aux personnages internationaux les plus importants, tout en appliquant le basic everything@anything.anything format. Il va bloquer les espaces qui sont techniquement autorisés par RFC, mais ils sont si rares que je suis heureux de le faire.


95



Dans les navigateurs modernes, vous pouvez construire sur la réponse de @ Sushil avec JavaScript pur et le DOM:

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity === 'function' ? input.checkValidity() : /\S+@\S+\.\S+/.test(value);
}

J'ai mis un exemple dans le violon http://jsfiddle.net/boldewyn/2b6d5/. Combiné avec la détection de fonctionnalités et la validation de bare-bones de La réponse de Squirtle, il vous libère du massacre de l'expression régulière et ne fonctionne pas sur les anciens navigateurs.


76



JavaScript peut correspondre à une expression régulière:

emailAddress.match( / some_regex /);

Voici un RFC22 expression régulière pour les emails:

^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*
"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x
7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<
!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])
[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$

63



C'est la version correcte de RFC822.

function checkEmail(emailAddress) {
  var sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  var sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  var sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  var sQuotedPair = '\\x5c[\\x00-\\x7f]';
  var sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d';
  var sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22';
  var sDomain_ref = sAtom;
  var sSubDomain = '(' + sDomain_ref + '|' + sDomainLiteral + ')';
  var sWord = '(' + sAtom + '|' + sQuotedString + ')';
  var sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*';
  var sLocalPart = sWord + '(\\x2e' + sWord + ')*';
  var sAddrSpec = sLocalPart + '\\x40' + sDomain; // complete RFC822 email address spec
  var sValidEmail = '^' + sAddrSpec + '$'; // as whole string

  var reValidEmail = new RegExp(sValidEmail);

  return reValidEmail.test(emailAddress);
}

60



La validation correcte de l'adresse e-mail en conformité avec les RFC n'est pas quelque chose qui peut être réalisé avec une expression régulière à un interligne. Un article avec la meilleure solution que j'ai trouvé en PHP est Qu'est-ce qu'une adresse e-mail valide?. Évidemment, il a été porté sur Java. Je pense que la fonction est trop complexe pour être portée et utilisée en JavaScript.

Une bonne pratique consiste à valider vos données sur le client, mais revérifiez la validation sur le serveur. Dans cet esprit, vous pouvez simplement vérifier si une chaîne ressemble à une adresse e-mail valide sur le client et effectuer une vérification stricte sur le serveur.

Voici la fonction JavaScript que j'utilise pour vérifier si une chaîne ressemble à une adresse mail valide:

function looksLikeMail(str) {
    var lastAtPos = str.lastIndexOf('@');
    var lastDotPos = str.lastIndexOf('.');
    return (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2);
}

Explication:

  • lastAtPos < lastDotPos: Dernier @ devrait être avant la fin . depuis @ ne peut pas faire partie du nom du serveur (pour autant que je sache).

  • lastAtPos > 0: Il devrait y avoir quelque chose (le nom d'utilisateur e-mail) avant la dernière @.

  • str.indexOf('@@') == -1: Il ne devrait pas y avoir @@ dans l'adresse. Même si @ apparaît comme le dernier caractère du nom d'utilisateur de l'email, il doit être " serait entre @ et le dernier @ dans l'adresse.

  • lastDotPos > 2: Il devrait y avoir au moins trois caractères avant le dernier point, par exemple a@b.com.

  • (str.length - lastDotPos) > 2: Il doit y avoir suffisamment de caractères après le dernier point pour former un domaine à deux caractères. Je ne suis pas sûr si les parenthèses sont nécessaires.


47