javascript - while - w3c valid email address




Wie validiere ich eine E-Mail-Adresse in JavaScript? (20)

Wie kann eine E-Mail-Adresse in JavaScript überprüft werden?


Eine Lösung, die das Vorhandensein der TLD nicht überprüft, ist unvollständig.

In fast allen Antworten auf diese Fragen wird die Verwendung von Regex zum Überprüfen von E-Mail-Adressen empfohlen. Ich denke, Regex ist nur gut für eine rudimentäre Bestätigung. Es scheint, dass die Überprüfung der E-Mail-Adressen zwei Probleme aufweist:

1- Überprüfung des E-Mail-Formats: Prüfen, ob die E-Mail dem Format und Muster der E-Mails in RFC 5322 entspricht und ob die TLD tatsächlich vorhanden ist. Eine Liste aller gültigen TLDs finden Sie here .

Obwohl die Adresse zum Beispiel [email protected]die Regex weitergibt, handelt es sich nicht um eine gültige E-Mail, da sie cccvon IANA keine Top-Level-Domäne ist.

2- Sicherstellen , dass die E - Mail tatsächlich existiert: dies zu tun, ist die einzige Option ist der Benutzer eine E - Mail zu senden .


Alle E-Mail-Adressen enthalten ein "at" (dh @) Symbol. Testen Sie diese notwendige Bedingung:

email.indexOf("@") > 0

Kümmern Sie sich nicht um etwas komplizierteres. Selbst wenn Sie genau feststellen könnten, ob eine E-Mail RFC-syntaktisch gültig ist, würde Ihnen das nicht sagen, ob sie der Person gehört, die sie geliefert hat. Darauf kommt es wirklich an.

Um dies zu testen, senden Sie eine Bestätigungsnachricht.


Die Verwendung regulärer Ausdrücke ist wahrscheinlich der beste Weg. Sie können hier eine Reihe von Tests here (aus chromium )

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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 ist das Beispiel eines regulären Ausdrucks, der Unicode akzeptiert:

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

Denken Sie jedoch daran, dass Sie sich nicht nur auf die Validierung von JavaScript verlassen sollten. JavaScript kann leicht deaktiviert werden. Dies sollte auch serverseitig überprüft werden.

Hier ist ein Beispiel für das oben Gesagte:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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>


Die korrekte Validierung der E-Mail-Adresse in Übereinstimmung mit den RFCs kann nicht mit einem regulären Einzeilerausdruck erreicht werden. Ein Artikel mit der besten Lösung, die ich in PHP gefunden habe, lautet Was ist eine gültige E-Mail-Adresse? . Offensichtlich wurde es nach Java portiert. Ich denke, die Funktion ist zu komplex, um in JavaScript portiert und verwendet zu werden. JavaScript / node.js-Port: https://www.npmjs.com/package/email-addresses .

Es empfiehlt sich, Ihre Daten auf dem Client zu überprüfen, die Überprüfung auf dem Server jedoch noch einmal zu überprüfen. Zu diesem Zweck können Sie einfach prüfen, ob eine Zeichenfolge auf dem Client wie eine gültige E-Mail-Adresse aussieht, und die strenge Überprüfung auf dem Server durchführen.

Hier ist die JavaScript-Funktion, die ich verwende, um zu überprüfen, ob eine Zeichenfolge wie eine gültige E-Mail-Adresse aussieht:

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

Erläuterung:

  • lastAtPos < lastDotPos : Last @ sollte vor dem letzten stehen . da @ nicht Teil des Servernamens sein darf (soweit ich weiß).

  • lastAtPos > 0 : Vor dem letzten @ sollte etwas (der E-Mail-Benutzername) stehen.

  • str.indexOf('@@') == -1 : Die Adresse darf kein @@ . Auch wenn @ als letztes Zeichen im E-Mail-Benutzernamen erscheint, muss es in Anführungszeichen gesetzt werden, damit es zwischen dem @ und dem letzten @ in der Adresse steht.

  • lastDotPos > 2 : Vor dem letzten Punkt sollten mindestens drei Zeichen stehen, z. B. [email protected] .

  • (str.length - lastDotPos) > 2 : Nach dem letzten Punkt sollten genügend Zeichen vorhanden sein, um eine (str.length - lastDotPos) > 2 Domäne zu bilden. Ich bin mir nicht sicher, ob die Klammern notwendig sind.


Dies wurde von http://codesnippets.joyent.com/posts/show/1917 gestohlen

email = $('email');
filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email.value)) {
  // Yay! valid
  return true;
}
else
  {return false;}

Es gibt etwas, das Sie verstehen müssen, sobald Sie sich dafür entschieden haben, einen regulären Ausdruck zur Überprüfung von E-Mails zu verwenden: Dies ist wahrscheinlich keine gute Idee . Wenn Sie sich damit abgefunden haben, gibt es viele Implementierungen, die Sie auf halbem Weg dorthin bringen können. Dieser Artikel fasst sie gut zusammen.

Kurz gesagt, die einzige Möglichkeit, absolut sicher zu sein, dass das, was der Benutzer eingegeben hat, tatsächlich eine E-Mail ist, besteht darin, eine E-Mail zu senden und zu sehen, was passiert. Abgesehen davon ist alles nur Vermutungen.


HTML5 selbst hat eine E-Mail-Bestätigung. Wenn Ihr Browser HTML5 unterstützt, können Sie den folgenden Code verwenden.

<form><input type="email" placeholder="[email protected]">
    <input type="submit">
</form>

jsFiddle Link

Aus der HTML5-Spezifikation :

Eine gültige E-Mail-Adresse ist eine Zeichenfolge, die der email Produktion der folgenden ABNF entspricht, deren Zeichensatz Unicode ist.

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 >

Diese Anforderung ist eine vorsätzliche Verletzung von RFC 5322, die eine Syntax für E-Mail-Adressen definiert, die gleichzeitig zu streng ist (vor dem Zeichen "@"), zu vage (nach dem Zeichen "@") und zu locker (so dass Kommentare zulässig sind) Whitespace-Zeichen und zitierte Zeichenfolgen in einer Art, die den meisten Benutzern nicht vertraut ist), um hier von praktischem Nutzen zu sein.

Der folgende JavaScript- und Perl-kompatible reguläre Ausdruck ist eine Implementierung der obigen Definition.

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][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])?)*$/

Ich freue mich sehr darauf, dieses Problem zu lösen. Daher habe ich den regulären Ausdruck der E-Mail-Überprüfung oben geändert

um die Beispiele in der Wikipedia-E-Mail-Adresse zu übergeben .

Und hier sehen Sie das Ergebnis.


Ich habe festgestellt, dass dies die beste Lösung ist:

/^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/

Es erlaubt die folgenden Formate:

1.  [email protected]
2.  [email protected]
3.  [email protected]
4.  [email protected]
9.  #!$%&'*+-/=?^_`{}|[email protected]
6.  "()[]:,;@\\\"!#$%&'*+-/=?^_`{}| ~.a"@example.org
7.  " "@example.org (space between the quotes)
8.  üñîçøðé@example.com (Unicode characters in local part)
9.  üñîçøðé@üñîçøðé.com (Unicode characters in domain part)
10. Pelé@example.com (Latin)
11. δοκιμή@παράδειγμα.δοκιμή (Greek)
12. 我買@屋企.香港 (Chinese)
13. 甲斐@黒川.日本 (Japanese)
14. чебурашка@ящик-с-апельсинами.рф (Cyrillic)

Es ist eindeutig vielseitig und erlaubt die wichtigen internationalen Charaktere, während es dennoch das grundlegende Everything @ Anything-Format erzwingt. Es wird Räume blockieren, die von RFC technisch erlaubt sind, aber sie sind so selten, dass ich das gerne mache.


In modernen Browsern können Sie die Antwort von @ Sushil mit reinem JavaScript und dem DOM aufbauen:

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

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

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

Ich habe ein Beispiel in der Geige http://jsfiddle.net/boldewyn/2b6d5/ . Kombiniert mit der Feature-Erkennung und der Validierung der bloßen Knochen von Squirtle's Answer befreit Sie das Massaker von regulären Ausdrücken und bastelt nicht an alten Browsern.


Mach das:

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

Warum? Es basiert auf RFC 2822 , einem Standard, an den sich ALLE E-Mail-Adressen halten MÜSSEN.

Wenn ich E-Mail-Adressen in der Datenbank speichere, mache ich sie oft in Kleinbuchstaben, und in der Praxis können Regex-Zeichen normalerweise als Groß- und Kleinschreibung unterschieden werden. In diesen Fällen ist dies etwas kürzer:

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

Hier ein Beispiel, wie es in JavaScript verwendet wird (mit dem Kennzeichen "Groß- und Kleinschreibung beachten" am Ende).

var emailCheck=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
console.log( emailCheck.test('[email protected]') );

Hinweis :
Technisch können einige E-Mails Anführungszeichen im Abschnitt vor dem @ -Symbol enthalten, wobei Escapezeichen in den Anführungszeichen stehen (damit Ihr E-Mail-Benutzer unangenehm sein kann und Elemente wie @ und "..." enthalten kann, solange er in Anführungszeichen steht). Niemand macht das jemals! Es ist veraltet. Es ist jedoch im eigentlichen RFC 2822- Standard enthalten und hier weggelassen.

Weitere Informationen: http://www.regular-expressions.info/email.html


Prüfen Sie einfach, ob die eingegebene E-Mail-Adresse gültig ist oder kein HTML-Code verwendet.

<input type="email"/>

Es ist nicht notwendig, eine Funktion zur Validierung zu schreiben.


So macht es der node-validator :

/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~][email protected](?:(?:(?:[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]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/

Wow, hier gibt es viel Komplexität. Wenn Sie nur die offensichtlichsten Syntaxfehler abfangen möchten, würde ich Folgendes tun:

\[email protected]\S+

Es fängt normalerweise die offensichtlichsten Fehler auf, die der Benutzer macht, und versichert, dass das Formular meistens richtig ist, worum es bei der Validierung von JavaScript geht.



Beste Regex überhaupt, die mit dem RFC5322 bestätigt

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


Verwenden Sie diesen Code in Ihrer Validierungsfunktion:

var emailID = document.forms["formName"]["form element id"].value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
    alert("Please enter correct email ID")
    return false;
}

Ansonsten können Sie jQuery . Innerhalb der Regeln definieren Sie:

eMailId: {
    required: true,
    email: true
}

Der von Microsoft in ASP.NET MVC bereitgestellte reguläre Ausdruck lautet

/^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/

Was ich hier posten, falls es fehlerhaft ist - obwohl es immer perfekt für meine Bedürfnisse war.


Im Gegensatz zu Squirtle handelt es sich hier um eine komplexe Lösung, die jedoch die Überprüfung von E-Mails sehr gut macht:

function isEmail(email) { 
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
} 

Verwenden Sie wie folgt:

if (isEmail('[email protected]')){ console.log('This is email is valid'); }

Mein Wissen über reguläre Ausdrücke ist nicht so gut. Deshalb überprüfe ich zuerst die allgemeine Syntax mit einem einfachen regulären Ausdruck und prüfe anschließend spezifischere Optionen mit anderen Funktionen. Dies ist möglicherweise nicht die beste technische Lösung, aber auf diese Weise bin ich viel flexibler und schneller.

Die häufigsten Fehler, denen ich begegnet bin, sind Leerzeichen (vor allem am Anfang und Ende) und gelegentlich ein doppelter Punkt.

function check_email(val){
    if(!val.match(/\[email protected]\S+\.\S+/)){ // Jaymon's / Squirtle's solution
        // Do something
        return false;
    }
    if( val.indexOf(' ')!=-1 || val.indexOf('..')!=-1){
        // Do something
        return false;
    }
    return true;
}

check_email('[email protected]'); // Returns false
check_email('[email protected]'); // Returns false
check_email(' [email protected]'); // Returns false
check_email('[email protected]'); // Returns true






email-validation