How to Validate Email Address using RegExp in JavaScript?

Validating an email address in JavaScript is essential for ensuring that users input a correctly formatted email. Regular expressions (RegExp) provide an effective and efficient way to check the email format.

Why Validate Email Addresses?

Validating email addresses is important for a number of reasons:

• User Input: Ensure that users enter a correctly formatted email.
• Avoid Errors: Prevent errors caused by invalid email formats that might break functionality.
• User Experience: Provide real-time feedback to users about their email input, improving the overall experience.
• Security: Validating the email helps in preventing malicious input, reducing the risk of injection attacks.

What is a Regular Expression?

A Regular Expression (RegExp) is a sequence of characters that forms a search pattern. In JavaScript, RegExp objects are used for pattern matching within strings, such as checking the format of email addresses. For email validation, we use RegExp to check if an email address follows the general structure of a valid email.

A common RegExp pattern to validate email addresses looks like this:

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.

Regex Breakdown:

• ^[a-zA-Z0-9._%+-]+: Matches the username part of the email, allowing alphanumeric characters and some special characters like ., _, %, +, and -.
• @: Matches the literal "@" symbol that separates the username from the domain.
• [a-zA-Z0-9.-]+: Matches the domain part, allowing letters, digits, dots, and hyphens.
• \.: Escapes the dot (.) to match the literal period separating the domain from the top-level domain (TLD).
• [a-zA-Z]{2,}$: Matches the top-level domain (TLD), which must consist of at least 2 alphabetic characters.

Validating Email Address Format in JavaScript Regex

You can use either the test() method or the match() method with a regular expression to validate an email.

1. Using the test() Method with RegExp

You can use either the test() method or the match() method with the RegExp pattern to validate the email format.

let regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let mail = "[email protected]";
if (regex.test(mail)) {
    console.log("Valid Email address");
} else {
    console.log("Invalid Email address");
}

• regex.test(mail) checks if the email matches the regular expression.
• If the email matches the pattern, it prints "Valid Email address."
• Otherwise, it prints "Invalid Email address."

2. Using match() with RegExp

Another approach is to use the match() method, which returns an array if the email matches the regular expression or null if it doesn’t.

//Driver Code Starts
let regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let mail = "[email protected]";
//Driver Code Ends

let isValid = mail.match(regex);
if (isValid) {
    console.log("Valid email address");
} else {
    console.log("Invalid email address");
}

• mail.match(regex) tries to match the email against the regular expression.
• If there is a match, it returns an array with the matched string. If no match is found, it returns null.
• In this example, the result is stored in isValid and used to check if the email is valid.

Conclusion

Using RegExp in JavaScript is an efficient way to validate email addresses by checking the structure of the email. This ensures the email includes a valid username, the "@" symbol, a valid domain, and a correct TLD (like .com or .org). However, keep in mind that this method only checks the format and doesn't confirm whether the email address is deliverable or belongs to an active account.

• Use the test() method for a simple true/false check if you only need to know whether the email is valid.
• Use the match() method if you want more detailed information about the match, like extracting parts of the email or needing the match result for further processing.