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

Question

这个问题的答案是 community effort 。编辑现有答案以改进这篇文章。目前不接受新的答案或互动。

我想在将用户输入发送到服务器或尝试向其发送电子邮件之前检查用户输入是否是 JavaScript 中的电子邮件地址，以防止最基本的错误输入。我怎样才能实现这个目标？

Answer 1

使用regular expressions可能是在 JavaScript 中验证电子邮件地址的最佳方法。 View a bunch of tests on JSFiddle取自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 很容易被客户端禁用。此外，在服务器端进行验证也很重要。

以下代码片段是在客户端验证电子邮件地址的 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 invalid.');
    $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 email address</label>
<input id="email" type="email">

<p id="result"></p>