Vraag Hoe een e-mailadres valideren in JavaScript?


Hoe kan een e-mailadres worden gevalideerd in JavaScript?


3244


oorsprong


antwoorden:


Gebruik makend van normale uitdrukkingen is waarschijnlijk de beste manier. Je kunt een heleboel tests zien hier (genomen van chromium)

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());
}

Hier is het voorbeeld van reguliere expressie die unicode accepteert:

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

Maar houd er rekening mee dat je niet alleen moet vertrouwen op JavaScript-validatie. JavaScript kan eenvoudig worden uitgeschakeld. Dit moet ook aan de server worden gevalideerd.

Hier is een voorbeeld van het bovenstaande in actie:

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



Alleen voor de volledigheid, hier heb je nog een RFC 2822-compatibele regex

De officiële standaard staat bekend als RFC 2822. Het beschrijft de syntaxis waaraan geldige e-mailadressen moeten voldoen. Jij kan (maar dat zou je niet moeten doen - Lees verder) implementeer het met deze reguliere expressie:

(?:[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])+)\])

(...) We krijgen een meer praktische implementatie van RFC 2822 als we de syntaxis weglaten met dubbele aanhalingstekens en vierkante haken. Het zal nog steeds overeenkomen met 99,99% van alle e-mailadressen die momenteel worden gebruikt.

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

Een verdere wijziging die u kunt aanbrengen, is het toestaan ​​van elk tweeletterig landcode-topniveaudomein en alleen specifieke generieke hoofddomeinen. Deze regex filtert dummy e-mailadressen zoals asdf@adsf.adsf. U moet het bijwerken als nieuwe hoofddomeinen worden toegevoegd.

[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

Dus zelfs als je de officiële normen volgt, zijn er nog steeds compromissen te maken. Kopieer niet reguliere expressies van online bibliotheken of discussiefora. Test ze altijd op uw eigen gegevens en met uw eigen applicaties.

De nadruk ligt op mij


609



Ik heb Jaymon's antwoord enigszins aangepast voor mensen die een heel eenvoudige validatie willen in de vorm van:

anystring@anystring.anystring

De reguliere expressie:

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

Voorbeeld JavaScript-functie:

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

548



Er is iets dat u moet begrijpen als u besluit een reguliere expressie te gebruiken om e-mails te valideren: Het is waarschijnlijk geen goed idee. Als je dat eenmaal hebt gedaan, zijn er veel implementaties die je daar halverwege kunnen krijgen, dit artikel somt ze mooi op.

Kortom, de enige manier om absoluut, positief zeker te zijn dat wat de gebruiker heeft ingevoerd in feite een e-mail is, is om daadwerkelijk een e-mail te sturen en te zien wat er gebeurt. Anders dan dat is alles gewoon gissingen.


292



Wauw, er zijn hier veel complexiteit. Als je alleen de meest voor de hand liggende syntaxisfouten zou willen vangen, zou ik zoiets als dit doen:

\S+@\S+

Het bevat meestal de meest voor de hand liggende fouten die de gebruiker maakt en zorgt ervoor dat het formulier grotendeels gelijk heeft, en dat is waar het bij JavaScript-validatie om draait.


280



HTML5 zelf heeft e-mailvalidatie. Als uw browser HTML5 ondersteunt, kunt u de volgende code gebruiken.

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

jsFiddle link

Van de HTML5-specificatie:

EEN geldig e-mailadres is een tekenreeks die overeenkomt met de emailproductie van de volgende ABNF, de tekenset waarvoor Unicode is.

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 >

Deze vereiste is een opzettelijke overtreding van RFC 5322, dat een syntaxis definieert voor e-mailadressen die tegelijkertijd te strikt is (vóór het teken "@"), te vaag (achter het teken "@") en te laks (opmerkingen toestaan, witruimtetekens en geciteerd snaren op manieren die de meeste gebruikers niet kennen) om hier van praktisch nut te zijn.

De volgende JavaScript- en Perl-compatibele reguliere expressie is een implementatie van de bovenstaande definitie.

/^[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



Ik vond dit de beste oplossing:

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

Het staat de volgende formaten toe:

1. prettyandsimple@example.com
2. very.common@example.com
3. disposable.style.email.with+symbol@example.com
4. other.email-with-dash@example.com
9. #!$%&'*+-/=?^_`{}|~@example.org
6. "() []:,; @ \\\"! # $% & '* + - / =? ^ _ `{} | ~ .a "@ example.org
7. "" @ example.org (spatie tussen de aanhalingstekens)
8. üñîçøðé@example.com (Unicode-tekens in lokaal gedeelte)
9. üñîçøðé@üñîçøðé.com (Unicode-tekens in het domeingedeelte)
10. Pelé@example.com (Latijn)
11. δοκιμή@παράδειγμα.δοκιμή (Grieks)
12. 我 買 @ 屋企. 香港 (Chinees)
13. 甲 斐 @ 黒 川. 日本 (Japans)
14. чебурашка@ящик-с-апельсинами.рф (Cyrillisch)

Het is duidelijk veelzijdig en maakt de allerbelangrijkste internationale personages mogelijk, terwijl het basis-alles@anything.anything-formaat nog steeds wordt afgedwongen. Het zal spaties blokkeren die technisch zijn toegestaan ​​door RFC, maar ze zijn zo zeldzaam dat ik dit graag doe.


95



In moderne browsers kun je het antwoord van @ Sushil opbouwen met pure JavaScript en de 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);
}

Ik heb een voorbeeld in de viool gezet http://jsfiddle.net/boldewyn/2b6d5/. Gecombineerd met kenmerkdetectie en de bare-bones-validatie van Squirtle's antwoord, het bevrijdt je van de reguliere expressie bloedbad en bork niet op oude browsers.


76



JavaScript kan overeenkomen met een reguliere expressie:

emailAddress.match( / some_regex /);

Dit is een RFC22 reguliere expressie voor e-mails:

^((?>[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



Dit is de juiste RFC822-versie.

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



Correcte validatie van e-mailadressen in overeenstemming met de RFC's is niet iets dat kan worden bereikt met een reguliere expressie van één regel. Een artikel met de beste oplossing die ik in PHP heb gevonden is Wat is een geldig e-mailadres?. Het is duidelijk geporteerd naar Java. Ik denk dat de functie te complex is om geporteerd en gebruikt te worden in JavaScript.

Een goede gewoonte is om uw gegevens op de client te valideren, maar controleer de validatie op de server. Met dit in gedachten kunt u eenvoudig controleren of een string op een geldig e-mailadres op de client lijkt en de strikte controle op de server uitvoeren.

Hier is de JavaScript-functie die ik gebruik om te controleren of een string op een geldig e-mailadres lijkt:

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);
}

Uitleg:

  • lastAtPos < lastDotPos: Laatste @ moet voor laatste zijn . sinds @ kan geen deel uitmaken van de servernaam (voor zover ik weet).

  • lastAtPos > 0: Er moet iets zijn (de e-mailgebruikers-gebruikersnaam) vóór de laatste @.

  • str.indexOf('@@') == -1: Er zou geen moeten zijn @@ in het adres. Zelfs als @ wordt weergegeven als het laatste teken in de e-mailgebruikersnaam, dit moet zo worden vermeld " zou tussen dat zijn @ en de laatste @ in het adres.

  • lastDotPos > 2: Er moeten bijvoorbeeld ten minste drie tekens vóór de laatste punt staan a@b.com.

  • (str.length - lastDotPos) > 2: Na de laatste punt moeten er voldoende tekens zijn om een ​​domein met twee tekens te vormen. Ik weet niet zeker of de haakjes nodig zijn.


47