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

有很多方法可以验证电子邮件地址。使用普通的JavaScript学习正确的方法,并找出所有可用的选项

电子邮件地址的验证是处理表单时的常见操作之一。

它在联系表单,注册和登录表单等中很有用。

有人建议你不应该验证电子邮件完全没有。我认为稍微验证一下会更好,但不要太过热情。

电子邮件验证应遵循哪些规则?

电子邮件地址由本地部分和域部分两部分组成。

本地部分可以包含

  • 任何字母数字字符:a-zA-Z0-9
  • 标点:"(),:;<>@[\]
  • 特殊的角色:!#$%&'*+-/=?^_{|}~
  • 一个点.,如果它不是第一个或最后一个字符。而且,它不能重复

域部分可以包含

  • 任何字母数字字符:a-zA-Z0-9
  • 连字符-,如果它不是第一个或最后一个字符。可以重复

使用正则表达式

验证电子邮件地址的最佳选择是使用正则表达式

没有普遍的电子邮件支票正则表达式。每个人似乎使用的都是不同的,由于不准确或由于他们不计算引入的较新域或国际化的电子邮件地址,您在网上找到的大多数正则表达式将无法通过最基本的电子邮件方案

不要盲目使用任何正则表达式,而要先检查一下。

我做了这个例子在毛刺它将检查被视为对正则表达式有效的电子邮件地址列表。您可以更改正则表达式,并将其与您要使用的其他正则表达式进行比较。

目前添加的是我认为最准确的一个,对其进行了稍微编辑以修正带有多个点的问题。

注意:我没有提出。我在Quora答案中找到了它,但是我不确定那是原始来源。

此函数可使用该正则表达式进行验证:

const validate = (email) => {
  const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i

return expression.test(String(email).toLowerCase()) }

满足所有常见情况,可以假设人们将添加的99.9%的电子邮件地址已成功验证。

此故障的代码包含其他正则表达式,您可以通过重新混合项目轻松地尝试。

尽管非常准确,但是此正则表达式在一些极端情况下存在一些问题,您可以根据需要使用(或不使用)这些正则表达式。

错误的否定地址,例如:

"very.(),:;<>[]".VERY."[email protected]\ "very".unusual"@strange.example.com

one.“more\ long”@example.website.place

本地地址的假否定:

[email protected]
[email protected]

of little use in publicly accessible websites (actually a plus in publicly accessible websites to have those denied)

Also, false negative for IP-based emails:

[email protected][2001:DB8::1]
[email protected]

There is a false positive for addresses with the local part too long:

123[email protected]example.com

Do you want a simpler regex?

The above regex is very complicated, to the point I won’t even try to understand it. Regular expressions masters created it, and it spread through the Internet until I found it.

Using it at this point is a matter of copy/pasting it.

A much simpler solution is just to check that the address entered contains something, then an @ symbol, and then something else.

In this case, this regex will do the trick:

const expression = /\[email protected]\S+/
expression.test(String('[email protected]').toLowerCase())

This will cause many false positives, but after all the ultimate test on an email address validity happens when you ask the user to click something in the email to confirm the address, and I’d rather try to send to an invalid email than reject a valid email because of an error in my regex.

This is listed in the above Glitch, so you can easily try it.

Validate the HTML field directly

HTML5 provided us the email field type, so don’t forget you can also validate emails using that:

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

Depending on the browser implementation also this validation will give you different results.

This Glitch shows the same emails I tested the regex with, and their result when validated through the HTML form.

The results are interesting, and here as well we have invalid emails that pass, and valid emails that don’t. Our regex actually does a more accurate job than the HTML filtering built into the browser.

Validate server-side

If your app has a server, the server needs to validate the email as well, because you can never trust client code, and also JavaScript might be disabled on the user browser.

Using Node.js you have the advantage of being able to reuse the frontend code as-is. In this case the function that validates can work both client-side and server-side.

You can also use pre-made packages like isemail, but also in this case results vary. Here is the isemail benchmark on the same emails we used above: https://glitch.com/edit/#!/flavio-email-validation-node-isemail


More js tutorials: