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

Question

我想检查用户输入是否是 JavaScript 中的电子邮件地址，然后再将其发送到服务器或尝试向其发送电子邮件，以防止最基本的错误输入。我怎么能做到这一点？

原文由 pix0r 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 正则表达式 可能是最好的方法。你可以 在这里 看到一堆测试（取自 chromium ）

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

这是接受 unicode 的正则表达式的示例：

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

但请记住，不应仅依赖 JavaScript 验证。 JavaScript 很容易被禁用。这也应该在服务器端进行验证。

这是上面的一个例子：

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

 const validate = () => {
 const $result = $('#result');
 const 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;
 }

 $('#email').on('input', validate);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <label for="email">Enter an email address: </label>
 <input id="email" />
 <h2 id="result"></h2>

原文由 John Rutherford 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于那些想要以以下形式进行真正简单验证的人，我稍微修改 了 Jaymon 的回答：

 [e-mail]

正则表达式：

 /^\S+@\S+\.\S+$/

为防止匹配多个 @ 符号：

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

上面的正则表达式匹配整个字符串，删除前导和 ^ 和尾随 $ 如果你想匹配字符串中的任何地方。下面的示例匹配字符串中的 _任何位置_。

如果您确实想要匹配整个 sring，您可能需要 trim() 字符串。

示例 JavaScript 函数：

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

console.log(validateEmail('my email is [e-mail]')); // true

console.log(validateEmail('my email is anystring@anystring .any')); // false

原文由 C. Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议