Email Validation: Regex & JavaScript

Should You Validate Email Addresses With Regular Expressions?

Here's the thing: you should not use Regex for email validation. It is not a robust enough solution, and as we've seen, there are plenty of ways to do email validation in your Javascript code without it.

In this article, we're going to look at what a regular expression is, how you can use it to validate an email, why you shouldn't do that, and an alternative email validation method using Javascript and a dedicated email validation API from AbstractAPI.

We'll provide usable Javascript code snippets along with regular expressions.

What Is a Regular Expression?

A regular expression is a sequence of ascii characters that represents a search string pattern. You can use a regular expression (also called a "regex") to search for a pattern of text within a file or string, to validate an input or input type, or to replace sections of text within a string.

At its most basic, a regular expression can be a string of literal characters. In Javascript, a basic regular expression could look something like this:

const basic_regex = new Regex("hello");

This pattern of ascii characters will match the word "hello."

Of course, Regex usually gets much more complicated than that. Here's an example of a pretty complicated regular expression:

This string matches invalid ascii characters within a URL. It's part of the official Twitter Text library.

Here's another example of a slightly less complicated regular expression:

This is a nice breakdown of how a regular expression works. This one is for matching an IP address.

One of the most complicated regular expressions we've ever come across was generated by a Perl module and, interestingly enough, it was intended to validate email addresses. Don't worry though! You don't need to write anything nearly this complicated in your Javascript email validation code!

Breaking Down Regular Expressions

Let's take a quick look at how regular expressions are formed. This article won't dig too deeply into all of the boundaries, special characters, combinations, etc. as that is the kind of thing that can take years to master.

Honestly, very few people truly understand Regex, and there are lots of handy tools out there today that can help you write regular expressions for your Javascript code.

Regular Expression Syntax

Character

• A character is any ascii character that is not considered a "special character." It matches itself.
• For example, the regular expression A matches "A" and @ matches "@".

Special Characters

• These are ascii characters that have special meaning.
• They are: ., +, *, ?, ^, $, (, ), [, ], {, }, |, \.

Escape Sequences (\char):

• If a character has special meaning in regular expressions and you need to match it literally, you need to use an escape sequence. For example, \. matches "." the regex \+ matches "+" and regex \( matches "(".
• You need to use regex \\ to match "\" (the back-slash).
• You can use common escape sequences such as \n for newline, \t for tab, \r for carriage-return, etc.

A Sequence of Characters (or String)

• Strings are a combined sequence of characters.
• For example, the regex hello matches "hello". Strings are case-sensitive, but can be set to case-insensitive using a modifier.

Character Classes (or Bracket List)

• [...]: Match any one of the characters within the square bracket. For example [hello] matches "h", "e", "l", "l" or "o".
• [.-.] (Range Expression): Match any one of the characters in the range. For example, [0-9] matches any digit. [A-Za-z] matches any uppercase or lowercase letter.
• [^...]: Match anything that is not one of the characters. For example, [^0-9] matches any non-digit.

Occurrence Indicators (or Repetition Operators)

• +: Match one or more (1+), For example, [0-9]+ matches one or more digits in sequence, such as '123', '000'.
• : Match zero or more (0+), For example, [0-9] matches zero or more digits in sequence.
• ?: Match zero or one. For example, [+-]? matches an optional "+", "-", or the empty string.

Position Anchors

• Position anchors don't match characters, but match the position of characters, such as start-of-line, end-of-line, start-of-word and end-of-word.
• ^, $: Match the start-of-line and end-of-line respectively. For example, ^[0-9]$ matches a numeric string on one line.
• \b: Matches the boundary of word. For example, \bcat\b matches the word "cat" in the input string "the cat in the hat."
• \A, \Z: Match the start-of-input and end-of-input respectively.

This is only a brief overview of some of the basic regular expression syntax. There are many more special cases, character combinations, and rules. For our email validation regular expression, however, we won't go into those.

Regular Expressions to Match an Email Address in Javascript

Because an email is a string, you can use Regex to validate email. There are four key parts of an email address that need to be considered when we validate an email address: the username, the '@' symbol, and the domain name, including the top level domain (i.e. the '.com' part) and the service provider (i.e. the 'gmail' or 'yahoo' part.)

As you've seen, the regex for matching email addresses can get very complicated. There is no "fool-proof" regular expression that will match 100% of valid email addresses.

There is, however, an official standard known as RFC 5322 that dictates what valid email addresses should look like. That regular expression looks like this:

\A(?:[a-z0-9!#$%&'*+/=?^_‘{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_‘{|}~-]+)*
 |  "(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]
      |  \\[\x01-\x09\x0b\x0c\x0e-\x7f])*")
@ (?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?
  |  \[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}
       (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:
          (?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]
          |  \\[\x01-\x09\x0b\x0c\x0e-\x7f])+)
     \])\z

As you can see, it's pretty complex. We'll look at a slightly simpler version of this regular expression.

This regular expression will handle the majority of email validation needs for a basic application:

/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/gm

Let's break it down.

/

Indicates that the regex is starting

^

Asserts the beginning of a line.

[ ]

Match any one of the characters inside the brackets

A-Za-z

Match any uppercase or lowercase letter

0-9

Match any digits 0 9

_!#$%&'*+

Match any one of the literal characters in the list

\/

Match the / character

=?`{|}~^.-

Many any one of the literal characters in the list

+

Matches the previous token (in this case the group between the brackets) between one and unlimited times

@

Matches the "@" character

[A-Za-z0-9.-]+

Similar to the breakdown we just did: matches any uppercase or lowercase letters, any digits 0 9, the literal characters . and - (and matches that grouping as many times as necessary.

$

Asserts the end of a line

/

Indicates that the regex is ending.

gm

Modifiers that indicate that the search should be performed "globally" (meaning don't return after you find the first match), and "multi-line" (meaning, search multiple lines.)

This pattern will match the following email addresses:

abc123@gmail.com

38a$&%&*%@JKL123.com

normal_address@domain.com

38a$&%..--&*%@JKL1..23.com

Using Regular Expressions in Javascript Email Validation

Once you have your regular expression and you understand enough about regular expressions to know what it does, using it for email validation in your Javascript code is actually very straightforward.

You just need to create a new Regex object and use the provided methods that come on that object to run a search against a provided string. Let's take a look.

const emailRegex = 
 new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");

This creates a new Regex object using the regular expression for email validation that we just broke down and assigns it to a variable called emailRegex. Note that we pass the modifiers in a the second argument to the constructor.

const isValidEmail = emailRegex.test("email_address@domain.com");

console.log(isValidEmail) //true

The Javascript Regex object provides a method called test that accepts a string input and tests it against the regular expression you provided. If the input string is a positive match, the test method will return true. If not, it will return false.

That's it!

Alternative Email Validation Using an API

As we've discussed, you shouldn't use a regular expression to validate an email in Javascript. It is not a robust enough method and will not catch all possible email addresses. Not only that, there are literally hundreds of libraries and packages and APIs out there that will do email validation for you.

Let's look at the AbstractAPI Free Email Validation API as an alternative solution.

Get Started With the API

In order to use the API, you'll need to sign up and get an API key. The API key authenticates you with the API and allows you to make requests.

Navigate to the API home page and click "Get Started"

You'll be asked to sign up with an email address and password. Once you've done that, you'll land on the email API dashboard, where you'll see your API key, links to documentation and pricing modules, and a testing sandbox.

Copy the API key. We'll need it in our Javascript code.

Send an Email Validation Request to the API

Inside your Javascript code, create a function called sendEmailValidationRequest.

This function will accept an email address as its argument. It will send an AJAX request to the API endpoint with the email for validation. It will then receive and analyze the response and return a boolean value.

The response from the API will look something like this:

{
  "email": "eric@abstractapi.com",
  "autocorrect": "",
  "deliverability": "DELIVERABLE",
  "quality_score": "0.80",
  "is_valid_format": {
    "value": true,
    "text": "TRUE"
  },
  "is_free_email": {
    "value": false,
    "text": "FALSE"
  },
  "is_disposable_email": {
    "value": false,
    "text": "FALSE"
  },
  "is_role_email": {
    "value": false,
    "text": "FALSE"
  },
  "is_catchall_email": {
    "value": true,
    "text": "TRUE"
  },
  "is_mx_found": {
    "value": true,
    "text": "TRUE"
  },
  "is_smtp_valid": {
    "value": true,
    "text": "TRUE"
  }
}

There's a lot of information. For now, we're only interested in the is_valid_format field. The sendValidationRequest function will pull out the value from this field and return it as the result of our function.

Let's take a look at the code:

const API_KEY = "YOUR API KEY";
const API_URL = 
    "https://emailvalidation.abstractapi.com/v1/?api_key=" + API_KEY;

const sendValidationRequest = async (emailAddress) => {
    const fullURL = API_URL + "&email=" + emailAddress;
    const apiResponse = await fetch(fullUrl);
    const data = await apiResponse.json();
    const isValid = data.is_valid_format.value;
    return isValid;
}

This will return false if the email address provided is an invalid email address. If the email validation is successful, it will return true.

Note that the function is an async function, because we are sending a network request. We can improve this somewhat by adding error handling.

const sendValidationRequest = async (emailAddress) => {
    try {
        const fullURL = API_URL + "&email=" + emailAddress;
        const apiResponse = await fetch(fullUrl);
        const data = await apiResponse.json();
        const isValid = data.is_valid_format.value;
        return isValid;
    } catch(error) {
        throw new Error("Unable to validate email");
    }
}

This is a very easy way of validating email in your Javascript app.

The AbstractAPI endpoint does a lot of checks when it receives your email. As well as running a much more sophisticated regular expression check on the email, it also checks for syntax errors and typos in the email address (for example john@agmil.com), does real-time SMTP and MX record checks against the email's domain, and uses a variety of filters backed by machine learning to detect risky emails.

Conclusion

In this article, we broke down what regular expressions are, how to use them for email validation, and why using them for email validation is not a good idea. We also talked about some alternative methods for email validation and learned how to use the AbstractAPI Free Email Validation API for validating emails instead.

Hopefully, you now have a slightly deeper understanding of regular expressions, how to use them, and when not to use them.

FAQ

How Do You Validate an Email in JavaScript?

There are many ways to perform JavaScript email validation. The simplest way is to use the HTML5 validators in your HTML code. These can be accessed through any form input type and make validating email very easy.

Another way to do email validation in JavaScript is to use a package like Yup, kickbox or email-verifier. If you are building a form with React, you can use the out-of-the-box validation functions provided by libraries like React Hook Form and Formik.

Finally, you could use a dedicated third-party API like AbstractAPI's Free Email Validation API.

Should You Validate Email With Regex?

Validating email with a regular expression is not a good idea. It is impossible to capture all valid email addresses with a regular expression. Regex is too restrictive and often doesn't account for all the special characters that people put in their emails.

Regex also can't determine if the email provided actually exists. It won't know if the domain name is valid or if the email address is deliverable. It also won't catch temporary email addresses and can leave you susceptible to spam.

What is the Regex for Email?

There is no "universal" or "accepted" regular expression for an email string. There is no "fool-proof" Regex that will catch all email addresses. The closest you will find to that is the RFC 5322 standard, which looks like this:

\A(?:[a-z0-9!#$%&'*+/=?^_‘{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_‘{|}~-]+)*
 |  "(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]
      |  \\[\x01-\x09\x0b\x0c\x0e-\x7f])*")
@ (?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?
  |  \[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}
       (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:
          (?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]
          |  \\[\x01-\x09\x0b\x0c\x0e-\x7f])+)
     \])\z