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

javascript html regex email-validation

2022-08-29 21:44:26

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

答案 1

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

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>

答案 2

我稍微修改了Jaymon的答案，对于那些想要以以下形式进行非常简单验证的人来说：

anystring@anystring.anystring

正则表达式：

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

要防止匹配多个 @ 符号，请执行以下操作：

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

示例 JavaScript 函数：

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