Email Validation in JavaScript Using Regex

Introduction – Why Email Validation Matters

You might be wondering why you should bother to learn how to validate emails—whether using JavaScript and regex or alternative methods. I assume you may have your reasons. However, on the other hand, the obvious answer is “to enforce email validation”. But why care about email format correctness in the first place?

Briefly speaking, validating emails is a key step to ensure your software works seamlessly, as it guarantees data accuracy and prevents bounces.

This is no minor deal, as apps and APIs' usability relies, up to some point, on their database’s accuracy. Without validation, if, for instance, someone types user.1@asbtract.com instead of user.1@abstract.com, your software will store the wrong data, increasing performance issues and potentially damaging user experience.

Sending an email to an inexistent address not only causes a great deal of frustration to you and your app’s users. It can also increase your bounce rate, hurting your sender and IP reputation, further leading your messages to the spam folder or causing Email Service Providers to block them. Validation ensures that email addresses in your database are, at least, correctly formatted, reducing bounce risk.

Summarizing it, validation protects your app's usability, the users’ experience and ensures you can communicate seamlessly with them. Simple as it can be, validating contact data it’s a key step when working with user input… So, let’s dig into how to validate email addresses with JavaScript using regex.

Understanding a Valid Email Address Format

But first things first. Email validation enforces syntax requirements. This means that it ensures that the email address follows a specific format. Consequently, when writing a regex pattern, you have to know in advance what a valid address should look like. In other words, what will the regex check for—and why.

Email addresses typically consist of two parts separated by an at sign (“@”):

• The local section identifies the user and precedes the “@”, while the domain identifies the provider or server that handles the email and goes after the “@”. 
• The domain consists of both the domain name and the TLD (top-level domain). 

Consequently, in an address like:

The local part will be “user1” and the domain, “abstractapi.com”.

But the plot thickens: each part of an email address has its rules and a set of allowed characters that will help the regex determine whether an email format is valid or incorrect.

For instance, authorized characters in the local part include letters (a–z, A–Z), numbers  (0–9), special characters (! # $ % ^ & * _ + = ? - \ { } | ~`), and periods (dots). Whitespaces aren’t allowed.

On the other hand, the domain features letters (a–z, A–Z), numbers  (0–9), special characters (! # $ % ^ & * _ + = ? - \ { } | ~`), hypens (-), and periods (dots). 

Additionally, a valid domain will end with a TLD such as .com and .org, and should be at least 2 characters long: “user1@abstract.co” can be a valid address, but  “user1@abstract.c” can’t.

Further rules specifying the dos and don'ts of email addresses include the following ones:

• In the local part, periods are allowed between characters (as in “user.1”), but they cannot be used:
  
  • At the start or the end of the email (eg, “.user1@abstract.com”, “user1.@abstract.com”).
  • Consecutively (eg, “user..1@abstract.com”).

• Likewise, in the domain part, rules state that: 
  
  • Hyphens are not allowed at the start or end of a segment (eg,  “user1@-abstractapi.com”, “user1@abstractapi.com-”).
  • A single period is typically used to separate domain levels (as in “abstractapi.com”), but periods cannot be placed at the beginning or end of a domain (eg, “user1@.abstractapi.com”, “user1@abstractapi.com.”).

JavaScript Regex for Email Validation: The Basics

Now, how does the regex relate to the formatting rules mentioned above, and how does it work to validate an email address?

RegEx (Regular Expression) is a JavaScript object that can be used to search for, match, or validate strings that follow a specific structure. 

Particularly, “email regex” refers to a sequence of characters that define a search pattern for the valid format of email addresses, enabling an API to differentiate between random strings and valid addresses.

When used to validate email inputs, the regex will check that their format complies with the regular expression provided in the pattern. That is, with the rules specified by it, such as not having two consecutive periods in the local part. 

The Javascript regex provides a method called .test() that accepts a string input and tests it against the regex pattern. If the input string is a positive match, the test method will return “true”. If not, it will return “false”. 

It’s important to note that regex works as a solution for client-side email format checking and not by default for server-side validation. Nonetheless, as a first line of defense against bad email input, this method still accounts for cleaner data stored in your backend, fewer invalid API  calls, and faster feedback to users, improving software performance as well as user experience.

Simple Regex Pattern: The Breakdown

Now buckle up, for here’s where the real fun begins. As previously mentioned, email regex states the rules that email addresses should follow to have a valid format. That is, to (potentially) be proper emails and not just random strings. 

Here, email regex are written down using JavaScript, a programming language that is human-readable and relatively straightforward to process. A simple email regex pattern that checks that an email has the basic structure of local-part@domain may look like the string below:

If your knowledge of programming is limited, you’ll probably be about to climb the walls (we’ve all been there!). Keep calm, and keep on reading. We promise you it’s not that complicated once you know what each part of the regex does. Speaking of which, here’s a breakdown of the regex pattern featured above:

• “^” anchors the match to the start of the email string.
• “[^\s@]+” is the local part. It indicated this section should match one or more characters that aren’t spaces (“\s”)  or “@”. 
• “@” states that the format requires only one @ symbol between the local and domain parts.
• “[^\s@]+” is the domain name. Same as in the local part, it matches characters that aren’t spaces or “@”.
• “\.” here, the backslash (\) escapes the dot, meaning it makes it that it’s processed as a period and not as “any character” as it’s otherwise interpreted.
• “[^\s@]+” matches the TLD (com, org, io, etc.), allowing it to feature special characters, letters, and numbers, but no whitespaces or “@”.
• “$” closes the regex, as it anchors the match to the end of the string.

As you can see, this is a very simple pattern, adequate to catch obvious formatting mistakes, like spaces, missing “@” or empty local/domain parts (eg, user1@) and validate emails that don’t feature these errors (eg,  user_1@abstract-api.com). However, this regex isn’t enough to prevent more complex format errors, such as:

• Local or domain parts that start with a dot/hyphen.
• Consecutive dots in the local part.

Still, at the end of the day, this regex works for common use cases, where you only have to ensure that inputs in email fields look like emails. In other words, you just check for the correct structure before trying to store or to message an email address.

To automate this process, you can build it into your API by running a regex match against the input. Move on to the next section to learn one way to do this.

JavaScript Implementation

Remember the very simple regex you read in the previous section? Here, you can see it put into action using JavaScript so that when the “Email” field of your app receives an input, the address format is checked before the data is sent to the backend:

As mentioned above, the .test() method takes the email address as a string and checks it against the regex. While the first email (user@example.com) is valid, the second one lacks a TLD and is, therefore, invalid.

Thanks to the script, the API will return a boolean: true if the email matches the regex (that is, if the format is valid) or false otherwise​. This also provides a copy-paste friendly utility function for readers. 

Although the .test() function is more straightforward (ideal for quick yes/no checks on client-side validation), you can also use string.match() to obtain an array with data on the formatting error or null.

Advanced Regex Pattern for Email Validation

If you need to be more compliant with official email standards or you’re building a more professional tool, it’s natural to wonder whether there’s a better regex for email validation in JavaScript. 

After all, simpler approaches (like the one in the previous section) might still accept invalid emails and reject valid addresses, such as ones with subdomains (eg, user1@abstract.api.example.com) or special characters.

The good news is that a more comprehensive regex with a detailed pattern often does the trick. For example, the regex below:

This pattern allows further characters in the local part, including!#$%&'... and others, and allows multiple subdomains in the domain part. 

The number of required subdomains can be specified by adding {X} quantifiers in the final TLD. Consequently, for 2 subdomains, the regex will read:

For some more clarity, let’s examine the different parts of this regex, as well as their function:

• Local part. The pattern specifies that, before the “@”, a valid email address can include one or more of the permitted characters: letters, numbers, or the listed special characters: ! # $ % & ' * + / = ? ^ _ { | } ~ - .`. Additionally, according to this regex, valid addresses shouldn’t feature spaces, and dots should always be between other characters. 
• Domain part. The pattern allows for periods followed by additional domain characters, ensuring that no domain segment is empty and that there are no trailing dots. The domain section can be broken down into 3 parts; each one of them allows letters, digits, and hyphens and supports multiple subdomains:
  
  • Domain label (or “domain name”). In this case, it is written as “[a-zA-Z0-9-]+”. A real-life example would be “Gmail”.
  • Optional subdomains. They appear as “(\.[a-zA-Z0-9-]+)*”. An example of this can be “mail.google”.
  • TLD. For instance, “.com” or “.org”.

Nonetheless, take into account that this regex isn’t a “perfect” method to validate email addresses using JavaScript. 

But don’t blame the regex: some edge cases (such as addresses with uncommon formats) are beyond the scope of a single validation method and require more complex approaches. Still, this pattern can be a good general solution and will reject many more invalid formats than the simpler one.

How to Implement a Complex Regex

To implement a more advanced regex pattern in a JavaScript code so that your APIs automatically catch formatting mistakes, you can follow the script below: 

‍

Here, you can see that the first email address is valid, as the complex regex allows it. On the contrary, the second and third emails are rejected, as, respectively, one of them includes consecutive dots in the domain, and the other one starts its domain with a period.

To validate an email before the API processes the input, this script:

• Defines a function (isValidEmail()) that takes an email string and checks its format against the complex regex using .test().
• Verifies whether there are ".." inside the local part to catch consecutive dots.
• If the email address is adequate, it signals the console to print:

If it is not, it will print:

‍

Note that this approach can be expanded to catch invalid TLDs, missing domain parts, hyphens at the end/start of domain labels, and dots at the start/end of the local parts. It’s all up to how specific your validation needs are!

Form Validation Example in Practice

Let’s get down to business. When validating emails, you won’t be using a regex pattern by itself. As we saw in the previous sections, to verify email addresses in JavaScript, you’ll have to implement an email validation method on the app’s programming interface or API.

We’ve already reviewed some code snippets that show how to verify addressess’ formats by implementing regex validation on an API. Now, we’ll raise the stakes and provide an example of how to integrate HTML5 and regex check to validate emails in JavaScript on a form submission within a webpage context. 

First, we have a simple HTML form snippet with an email <input> field and a submit button:

HTML5's built-in verification will use the type="email" attribute to get basic validation from the browser, such as identifying missing “@” or domains. The required attribute will ensure that the field "email" isn’t empty.

But since here we’re aiming for a more complete email validation, let’s include some custom JavaScript regex checks, which may provide better user feedback and a more comprehensive validation.

Once implemented, the snippet below should allow the API to intercept the HTML form submission and validate the email address using the regex function for a more in-depth check:

This code snippet features the function validateEmail(), which enables stricter email format checks using the regex as a model. 

As you can see, the code https://www.abstractapi.com/api/email-verification-validation-api specifies that the local part should not include consecutive dots, neither start nor end with a period.

Thanks to  e.preventDefault(), the browser won’t submit the form right away, but only if it passes custom validation. For more control over the submitting behavior, you can replace this.submit() with an AJAX call.

If the address is invalid, it’ll return an error message reading “please, enter a valid email address”. If valid, you can continue and submit the form so that it’s saved into the API backend.

Both code snippets (HTML and JavaScript) configure a two-layered “line of defense” against invalid addresses, ensuring that email format verification is more accurate and adjusts to specific needs. 

While HTML5 is useful for quick client-side checks and to automate browser error messages, its pattern isn’t customizable. On the contrary, the JavaScript regex enables customization, allowing you to better control how valid email addresses should be formatted. 

Common Pitfalls and Limitations of Regex Validation

By now, you’ll probably be suspecting that you can’t entirely rely on regex for email checks. Although this method helps you catch common typos or structural mistakes early, improving an app’s performance and user experience, it has its limitations. For instance:

• Regex email validation, especially on the client side, validates the pattern of an email but not its existence or deliverability. For example, user.0ne@abstract.com would pass a regex test even if it is a non-existent email and has a typo within (uses “0“ instead of “o”), simply because its format matches the regex.
• A too strict regex may cause false negatives by rejecting valid emails, while too loose regex may accept invalid strings (false positives), as seen in some of the previous sections. The issue is that official email standards allow odd cases. Therefore, a single regex that covers every valid email address should be extremely complex and impractical to maintain (if such regex can be achieved).
• JavaScript validation runs solely on the client/browser side. This means that if users disable JavaScript, they’ll be able to bypass client-side checks, and email inputs won’t be validated. Consequently, server-side validation is often a safer option in critical use cases such as account registration or healthcare platforms.

• Excessively long or complex regex patterns can impact API performance, slowing it down. However, determining when a pattern ceases to be reasonably broad and becomes far too much detailed can be somewhat tricky. Especially when simpler regex fails to properly validate email addresses.

But these limitations don’t make regex email validation in JavaScript useless. On the contrary, it’s still a simple, effective method to rule out straightforwardly “garbage” inputs as a first line of defense. 

Nonetheless, if your application relies on email for critical uses, you might want to implement alternative measures, such as server-side validation and dedicated email verification APIs.

Best Practices for Email Validation in JavaScript

Now you’re just a few scroll-downs from taking flight and start validating email addresses with regex. But, as you can’t build a castle on sand, let’s review some best practices that will build a solid foundation, ensuring your email validation attempts don’t plummet to the ground.

To validate email in JavaScript effectively, you should go beyond regex. Proper validation can be achieved by:

• Implementing multiple layers of validation. Combine client-side regex with server-side validation for obtaining solid results, ensuring that if someone bypasses the front end, or in case of any regex blind spots, the email will be verified on the back end of the API.
• Applying HTML5 validation. When implementing several steps for email validation, HTML5 should be between them. As discussed before, <input type="email"> in forms allows for basic built-in validation, improving user experience and app performance. Viewing HTML validation as a “safety net” is key to boosting other JavaScript email verification methods, such as regex, crafting a reliable, smooth, and secure process that works at several levels.
• Using well-tested regex patterns. They should be sufficiently broad as to accept different valid addresses without being overly convoluted but strict enough to reject openly incorrect ones. As they’d be previously tested, you can be sure they’ll work well. If possible, select patterns that allow you to include extra checks in the code for edge cases.
• Resorting to email validation APIs for critical cases. Acknowledging one’s limits—and strengths—is key to success. One of regex's major pitfalls is (as seen) that it doesn’t recognize whether an email exists and can be reached. When knowing this is necessary (such as in sign-up forms), email validation APIs come to save the day. They can even provide further data on email addresses, critical for gaining a deeper insight on users and fostering communication. 
  
  • For instance, Abstract’s Email Verification API can perform deeper checks like domain verification, MX/DNS lookups, SMTP checks, and detecting disposable addresses, which goes far beyond regex capabilities—see our guide on using the Abstract Email Validation API for more details​.
  • You can also consider some popular JavaScript libraries such as validator.js or validate.js. These provide prooved email validation functions, which can save time and complexities for you. 

• Sending an address verification email. This is also a key strategy when setting up your API’s validation method. Incorporating double opt-in methods as a part of your overall validation strategy often accounts for more accurate results (and better user engagement metrics.

To Regex and Beyond: Email Validation at Its Peak

We’ve reached the end of this article. The moment has come to secure your goggles, spread your wings, and take flight.

It’s a thrilling experience to validate an email with regex for the first time—your life may flash before your eyes… or rather, not your life, but this article.

As you take off, you might recall that regex patterns serve as a guide for checking whether an email address has a valid format. This can be enforced using JavaScript, HTML5, or a combination of both.

However, this only covers client-side validation, which is inherently limited. Server-side validation steps in as your safety net, ensuring that email addresses are verified before reaching your backend.

Still, even these two layers aren’t enough to confirm whether an email actually exists. Regex can only tell you if the format looks right—not whether the address is real or reachable. And when you need a clean, reliable database, that’s simply not enough.

So… maybe regex alone isn’t the ace up your sleeve after all.

That’s where our Email Validation API comes in—free to try, with no strings attached. 🤝

At Abstract API, we’re developers building for developers. We share your challenges, your ideas, and your goals. And we craft APIs with those in mind to deliver results that lead the industry.

Even if you know how to fly, a parachute never hurts.
Take the leap—we’ll be there to catch you. 😉

FAQs – Email Validation in JavaScript

How do I Validate an Email Address in JavaScript?

To validate an email in JavaScript, the most straightforward way is using string methods, such as regex.

Pair a regex string like  /^[^\s@]+@[^\s@]+\.[^\s@]+$/ with the .test() function. This will check if a given string matches the email pattern. 

You can also use HTML fields (<input type="email"> ) to perform basic format checks automatically.

In both cases, always remember to validate on the server side as well. 

What is the Best Regex for Email Validation?

No regex pattern is “the best” for email validation in JavaScript. This is due to regex not covering 100% of the cases, as official email standards often allow many uncommon formats. 

Whether a more complex or simpler regex is better for you will solely depend on your needs. Nonetheless, most real-world emails can be handled with a plain pattern like the one below:

^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$

Here, a valid email address will feature common special characters, letters and numbers, an “@”, a period separating the domain parts, and a TLD consisting of at least 2 letters.

For more complex cases, it’s advisable to use a detailed regex that covers more characters and subdomains. You can also use JavaScript libraries or email validation APIs.

Can I Rely on Regex Alone to Verify an Email Address?

It’s not advisable to rely on regex alone, to validate an email address.

Although regex email verification serves as a first line of defense against invalid email format on the client-side, it has several limitations, and, additionally, it doesn’t verify an address’s existence. 

Fake emails such as user1@abstract.com will be validated by a regex just because they comply with its specification, regardless of “abstract.com” not being a real email domain.

Briefly speaking, you can use regex for client-side format validation, but you should use back-end checks or APIs for existence validation.

To ensure email addresses are properly verified, a highly effective approach is combining different steps besides using a regex. Some alternatives include: (1) running an HTML5 input, (2) implementing server-side checks, (3) checking MX record (DNS), (4) using validation APIs, and (5) implementing a double opt-in method to verify email addresses. 

This approach not only ensures that the email format is verified but also that addresses can receive messages and are willing to do so. 

‍

Which are Some Common Email Validation Libraries in JavaScript?

Some popular email validation libraries that you can use to implement email validation in JavaScript using regex include:

• Validator.js. A lightweight utility library that covers most real-world email formats and is relatively easy to use.
• Email-validator. This library focuses on email format validation and uses a simple API interface.
• Validator (in DOM /jQuery). A set of form validation libraries that feature, among other things, email rules. It’s ideal for browser-based forms.

‍