如何在 JavaScript 中验证电子邮件地址

使用正则表达式验证 JavaScript 中的电子邮件地址?

答案

使用正则表达式可能是最好的方法。您可以在此处看到大量测试(取自

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

这是接受 unicode 的常规表达式的示例:

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

但是请记住,不应该只依赖 JavaScript 验证。可以轻松禁用 JavaScript。这也应该在服务器端进行验证。

这是上述操作的一个示例:

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").on("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>

对于需要真正简单验证的人,我对 Jaymon 的答案做了一些修改:

anystring@anystring.anystring

正则表达式:

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

JavaScript 函数示例:

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

为了完整起见这里有另一个符合 RFC 2822 的正则表达式

官方标准称为RFC 2822 。它描述了有效电子邮件地址必须遵守的语法。您可以( 但不应该继续 阅读 )使用以下正则表达式实现它:

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

(...)如果省略使用双引号和方括号的语法,则将获得 RFC 2822 的更实际实现。 它仍然会匹配今天实际使用的所有电子邮件地址的 99.99%。

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

您可以做的进一步更改是允许任何两个字母的国家 / 地区代码顶级域名,仅允许特定的通用顶级域名。 此正则表达式过滤虚拟电子邮件地址,如asdf@adsf.adsf添加新的顶级域后,将需要对其进行更新

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

因此,即使遵循官方标准,仍然需要权衡取舍。 不要盲目地从在线图书馆或论坛中复制正则表达式。始终根据自己的数据和自己的应用程序对其进行测试。

重点矿

哇,这里有很多复杂性。如果您只想捕获最明显的语法错误,我将执行以下操作:

^\S+@\S+$

它通常会捕获用户所犯的最明显的错误,并确保表单最正确,这就是 JavaScript 验证的全部内容。

在决定使用正则表达式验证电子邮件时,您需要了解一些内容: 这可能不是一个好主意 。一旦您对此有所了解,就有许多实现可以使您半途而废, 本文对它们进行了很好的总结。

简而言之,唯一可以绝对肯定地确定用户输入的实际上是电子邮件的唯一方法是实际发送电子邮件并查看发生了什么。除此之外,所有这些只是猜测。

HTML5 本身具有电子邮件验证功能。如果您的浏览器支持 HTML5,则可以使用以下代码。

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

jsFiddle链接

根据HTML5 规范

有效的电子邮件地址是与以下 ABNF 的email产生匹配的字符串,该字符串的字符集为 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 >

此要求是对 RFC 5322 的故意违反 ,RFC 5322 定义了同时太严格(在 “@” 字符之前),太模糊(在 “@” 字符之后)和太松散(允许注释)的电子邮件地址语法。 ,空白字符和引号引起的字符串(大多数用户不熟悉的方式)在此处具有实际用途。

以下与 JavaScript 和 Perl 兼容的正则表达式是上述定义的实现。

/^[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])?)*$/

我发现这是最好的解决方案:

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

它允许以下格式:

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

它显然用途广泛,并允许使用所有重要的国际字符,同时仍强制执行基本的 any @@ thing.anything 格式。它会阻止 RFC 在技术上允许的空间,但是它们很少见,我很乐意这样做。

在现代浏览器中,您可以使用纯 JavaScript 和DOM在 @Sushil 的答案之上构建:

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

我在小提琴http://jsfiddle.net/boldewyn/2b6d5 / 中整理了一个示例。与功能检测和Squirtle's Answer的准系统验证相结合,它将您从正则表达式大屠杀中解放出来,并且不会在旧的浏览器上出现问题。

这是正确的 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);
}

JavaScript 可以匹配正则表达式:

emailAddress.match( / some_regex /);

这是电子邮件的RFC22正则表达式:

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