30秒学会 JavaScript 片段 · 2022年3月25日

30秒学会 JavaScript 片段 – Can I validate an email address in JavaScript?

One of the most frequent code snippet requests I get is about a function that can validate email addresses. While it sounds easy, I’ve been putting off writing about this topic for a while. The reason is that there are no great solutions to this sort of problem.

Theoretically, email addresses can be validated using a regular expression. After all, there are a couple of simple rules, such as the presence of the at (@) symbol and an appropriate domain, right? Yes, but there are tons of valid email address that don’t look exactly like that. In fact, there’s a whole standard, RFC 2822, that defines what email addresses can look like. Then, there’s the issue of what different mail servers will allow. Gmail, for example, will not allow underscores (_) or more than one period (.) in a row.

Additionally, even if you could validate an email address, there’s no way of knowing if this address is in fact currently in use. The only way to do so, is to send an email and check the response. This is why most websites and apps nowadays send you a confirmation email in the first place.

Finally, even if you used a regular expression that is compliant with RFC 2822, it wouldn’t be without issues. Understanding how it works or figuring out if it works correctly for each and every case would be pretty difficult. More importantly, though, it could be prone to regular expression denial of service (ReDoS) attacks, if implemented incorrectly.

By now, you should be starting to figure out why I’ve been hesitant to showcase a solution to the problem of email validation. While solutions do exist, the implications of each one must be considered carefully.

My suggestion would be to check for basic structural elements on the frontend, then send a confirmation email from your server to check that the email address is in use. It’s easy to implement and gets the job done. Going back to the original idea, here’s a simple function that checks for the most common syntax errors.

代码实现

const isEmailValid = address => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address);

isEmailValid('[email protected]'); // true
isEmailValid('[email protected]'); // true
isEmailValid('[email protected]'); // true
isEmailValid('[email protected]'); // true
isEmailValid('ab [email protected]'); // false
isEmailValid('ab@[email protected]'); // false
isEmailValid('abcde@sitecom'); // false
isEmailValid('abcdesite.com'); // false

This regular expression is pretty short, yet it validates the following conditions:

  • No whitespace characters anywhere in the email address
  • Presence of a single at (@) character before the domain part
  • At least one dot (.) character in the domain part

翻译自:https://www.30secondsofcode.org/js/s/email-validation