In this tutorial, we will show how to validate emails in JavaScript. You’ve probably written a frontend where your user needed to either register for or log in to, an account.
In both cases, you required the user to enter an email address.
What if the user enters an invalid email address?
You need a way to make sure this does not happen. Therefore, we need a way to validate the user’s input to make sure it is the correct email address.
Email validation Regex | JavaScript
We will be utilizing the regular expression feature available in javascript.
With regular expressions, we can define a pattern that all required emails need to fit in.
Then we test the user input against the pattern. Any input that does not match that pattern is ‘invalid’.
As programmers, we determine the rules by which our programs run.
So, we can determine what constitutes a valid email address. Hence, we will create regular expression rules that make sure the user
- Enters specific email addresses
- Enters email addresses that contain one or more specific domains
- Enters email addresses with specific top-level domains
- A valid email address
Validate specific emails in JavaScript
We might want to check if the user entered specific email addresses in a few cases. Our regular expression could look like this:
/^address1|address2|address3$/
We want our regular expression engine to try to match the user’s input against one out of the three options in the regular expression pattern. If the input matches none of the options in the pattern, then the match fails.
This first example demonstrates how to validate the user input for either of two email addresses.
// define the regex to match specific emails
regex = /^jane@uhura\.com|john@smith\.net$/;
// test the regex by matching several inputs
console.log(regex.test('jones.net')); // OUTPUTS false
console.log(regex.test('jane@uhura.com')); // OUTPUTS true
console.log(regex.test('john@uhura.net')); // OUTPUTS false
console.log(regex.test('john@smith.net')); // OUTPUTS true
The regex pattern expected one of two emails; either 'jane@uhura.com' or 'john@smith.net'.
If the user enters an email address other than these two, regex.test() will return false.
Validate emails in JavaScript having a specific domain
The expected user input could be restricted to a particular domain, like gmail.com, or nasa.gov. The next code example will check if the user’s input has the domain outlook.com. The user can enter any username, but the domain must be restricted to outlook.com.
Below is the format we are expecting from our user is:
@outlook.com
The is a string of one or more lowercase letters or digits. The regular expression pattern we will use is [a-z0-9]+. We could allow uppercase letters and underscores, but we want to keep the example simple. The code to carry out the validation is:
// define the regex to match the domain 'outlook.com'
regex = /^[a-z0-9]+@outlook\.com$/;
// test the regex by matching several inputs
console.log(regex.test('abraca@outlook.com')); // OUTPUTS true
console.log(regex.test('abraca@gmail.com')); // OUTPUTS false
console.log(regex.test('jojo1@outlook.com')); // OUTPUTS true
console.log(regex.test('xzibit247@outlook.com')); // OUTPUTS true
console.log(regex.test('abraca@outlook.co')); // OUTPUTS false
console.log(regex.test('abra.ca@outlook.com')) // OUTPUTS false
In the last console.log() line, regex.test() returned false because the username part failed to match. regex.test() was not expecting to match a dot character in the username, just lowercase letters and digits.
Cool, right!!! We could also allow the user to enter more than one possible domain.
For example, the user could enter either a gmail.com, or a wix.com domain, as shown in our next example.
// define the regex to match either 'gmail.com' or 'wix.com'
regex = /^[a-z0-9]+@(gmail|wix)\.com$/;
// test the regex by matching several inputs
console.log(regex.test('abraca@outlook.com')); // OUTPUTS true
console.log(regex.test('abraca@gmail.com')); // OUTPUTS true
console.log(regex.test('jojo1@outlook.com')); // OUTPUTS false
console.log(regex.test('xzibit247@wix.com')); // OUTPUTS true
console.log(regex.test('abraca@wix.co')); // OUTPUTS false
console.log(regex.test('abra.ca@gmail.com')); // OUTPUTS false
The outputs in the comments show what regex.test() returns in each console.log() line. However, in the last line, regex.test() fails because the username contains a dot character.
Validate emails in JavaScript that have specific top-level domains
We will go more general with the next example by trying to verify if the user input contains a com top-level domain. The example can be modified to check for any other top-level domain like net or gov.
// Match all '.com' top level domains
regex = /^[a-z0-9]+@[a-z]+\.com$/;
// test the regex by matching several inputs
console.log(regex.test('annor@grimm.net')); // OUTPUTS: false
console.log(regex.test('annor@grimm.com')); // OUTPUTS: true
console.log(regex.test('annor@grimm.gov')); // OUTPUTS: false
From the code, only the second call to regex.test() matched. That is because it contains com at the end of the string. The others had other top-level domains, which is why they failed to match.
In the next example, the code gives the user more flexibility by allowing either com or net top-level domains.
// Define a regex that matches the '.com' or the '.net' top level domains
regex = /^[a-z0-9]+@[a-z]+\.(com|net)$/;
// test the regex by matching several inputs
console.log(regex.test('nk12@example.com')); // OUTPUTS: true
console.log(regex.test('nk12@example.gov')); // OUTPUTS: false
console.log(regex.test('nk12@example.net')); // OUTPUTS: true
This time, any email address without com or net top-level domains will fail the validation.
JavaScript email validation for the general format
Finally, we will show an example of how to validate a general email having any username, any domain, and any top-level domain. The regular expression pattern to check for usernames and domains will be the ones from the previous examples. That is
username pattern = [a-z0-9]+
domain pattern = [a-z]+
However, we will add a new pattern for matching domain names. The rule will be that all top-level domain names will be a string of 2 or 3 characters. That is in terms of regular expressions
top-level domain pattern = [a-z]{2, 3}
The code to validate the user inputs is found in the listing below
// Define the pattern for the general email
regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/
// test the regex by matching several inputs
console.log(regex.test('eve@gmail.com')); // OUTPUTS: true
console.log(regex.test('eve@gmail.co2')); // OUTPUTS: false
console.log(regex.test('eve@gmail')); // OUTPUTS: false
console.log(regex.test('eve234@benxam.gov')); // OUTPUTS: true
The second input fails because the top-level domain part should not contain numbers. The third input fails because there is no top-level domain at all. With this pattern, we can validate most emails.
Conclusion for validating emails in JavaScript
We have discussed how to make use of regular expressions in javascript to validate emails.
We showed code examples of-
- How to check if the user enters a specific address?
- Check if the user entered emails that have a specific domain.
- Check if the user entered emails with a specific top-level domain.
- And we also wrote a validation code to check if the user input matched a general email format.
Thanks for reading this tutorial, and please check out our other javascript tutorials. Like this article? Follow us on Facebook and LinkedIn.
