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

发布时间 2023-10-10 20:36:59作者: 小满独家

内容来自 DOC https://q.houxu6.top/?s=如何在JavaScript中验证电子邮件地址?

我想在将用户输入发送到服务器或尝试向其发送电子邮件之前,在JavaScript中检查它是否是电子邮件地址,以防止最基本的拼写错误。我该如何实现?


使用正则表达式可能是在JavaScript中验证电子邮件地址的最佳方法。查看JSFiddle上从Chromium获取的一堆测试,该测试取自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>