使用 JavaScript 验证电子邮件的 4 种方法📮

在本文中，您将发现使用 JavaScript 进行电子邮件验证的三种方法！

“一个古老的传说是，一旦你创建了联系表单，你就成了一个 Web 开发奇才！🧙😄” - 未知

使用正则表达式验证电子邮件

使用 JavaScript 验证电子邮件的最常见方法是使用正则表达式 (RegEx)。正则表达式可以帮助您定义规则来验证字符串。

总结一下，电子邮件是遵循以下格式的字符串：

1. 电子邮件的第一部分

大写和小写字母：az 和 AZ
数字：0-9
连字符：-（不是最后一个字符或第一个字符）
点：.（不是最后一个字符或第一个字符）

注意：某些电子邮件提供商允许使用包含以下字符的电子邮件地址：! # $ % & ‘ \* + / = ? ^ \ _ \ { | } ~ " ( ) , : ; < > @ [ \ ]。这取决于您是否要接受这些邮件，但大多数网站都会拒绝它们。

2. 电子邮件的第二部分

大写和小写字母：az 和 AZ
数字：0-9
连字符：-（不是最后一个字符或第一个字符）

3. 电子邮件的第三部分

大写和小写字母：az 和 AZ
数字：0-9
点：.（不是最后一个字符或第一个字符）

以下是电子邮件正则表达式：

/^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i

在 JavaScript 中，您可以使用此功能进行电子邮件验证。

function isEmailValid(email) {
  const emailRegexp = new RegExp(
    /^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i
  )

  return emailRegexp.test(email)
}

console.log(isEmailValid('helloitsme@herewecode.io')) // true
console.log(isEmailValid('hello-its-me@herewecode.io')) // true
console.log(isEmailValid('hello.its.me@herewecode.io')) // true
console.log(isEmailValid('helloitsme+test@herewecode.io')) // true
console.log(isEmailValid('.helloitsme@herewecode.io')) // false
console.log(isEmailValid('helloitsme.@herewecode.io')) // false
console.log(isEmailValid('@herewecode.io')) // false
console.log(isEmailValid('helloitsmeherewecode.io')) // false
console.log(isEmailValid('helloitsme@herewecode')) // false
console.log(isEmailValid('d@d.o')) // false

注意：正如你所想象的，这个正则表达式不是自制的。我在 Stack Overflow 上找到了它；然后我对其进行了更新，使其符合上面解释的电子邮件字符串格式。

使用电子邮件验证器进行电子邮件验证

如果您不想创建自定义函数来验证电子邮件，可以使用库。
当我们在 Google 上输入“电子邮件验证库 javascript”时，第一个结果就是“电子邮件验证器”库。

下面是一个如何使用它的示例：

const validator = require('email-validator')

console.log(validator.validate('helloitsme@herewecode.io')) // true
console.log(validator.validate('hello-its-me@herewecode.io')) // true
console.log(validator.validate('hello.its.me@herewecode.io')) // true
console.log(validator.validate('helloitsme+test@herewecode.io')) // true
console.log(validator.validate('.helloitsme@herewecode.io')) // false
console.log(validator.validate('helloitsme.@herewecode.io')) // false
console.log(validator.validate('@herewecode.io')) // false
console.log(validator.validate('helloitsmeherewecode.io')) // false
console.log(validator.validate('helloitsme@herewecode')) // false
console.log(validator.validate('d@d.o')) // false

电子邮件验证器是众多库中的一个。你可以在网上找到很多功能各异的验证器。

使用 HTML5 输入验证来验证电子邮件

验证电子邮件的最后一种方法是使用HTML5 电子邮件输入。

<input type="email" id="email" name="email" placeholder="email" />

以下是使用简单表单进行电子邮件验证的示例：

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Validate Email</h1>

    <p>Write your email and we will validate it:</p>

    <form>
      <input type="email" id="email" name="email" placeholder="Email" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

如您所见，当电子邮件地址不正确时，HTML 会触发错误。但是，如果我们输入例如“helloitsme@herewecode”或“-herewecode.io”，则表单有效。
此选项是一个很好的功能，当您在网站上实现表单时应该使用。它适用于首次验证，但不要忘记自行验证以避免出现问题。

使用 API 进行电子邮件验证

另外，您还可以使用 API 验证电子邮件。以下是一些提供电子邮件验证 API 的公司：SendGrid、MailBoxLayer、Abstract API 等。
这些 API 大多收费，但它们会提供一些高级功能（例如：检查电子邮件是否存在）。

嘿，你成功了！

感谢你读到最后！希望你有所收获！🎉

➡️ 我帮助 Web 开发人员提高他们的技能💻如果您想获得有关 Web 编程的更多提示和资源 ->在 Twitter 上关注我🐦

文章来源：https://dev.to/herewecode/how-to-validate-an-email-with-javascript-25k3