How To Validate Email Using regex In Javascript

Let’s look at how to validate email using regex in JavaScript.

Introduction

Email validation is one of the most important parts of a web application, as virtually every website use user authentication. The validation ensures that a correct email is entered by the user. We use regular expressions and match the entered email pattern to a known pattern of valid emails.

Email Validation using RegEx in JavaScript

We use the match() method of the string to match the RegEx pattern to the given string.

const pattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
let email = "test@gmail.com";

let result = email.match(pattern);
if(result) {
  console.log(`The given email: ${email} is valid`);
} else {
  console.log(`The given email: ${email} is invalid`);
}

email = "test@gm+ail.com";
result = email.match(pattern);
if(result) {
  console.log(`The given email: ${email} is valid`);
} else {
  console.log(`The given email: ${email} is invalid`);
}

Result:

The given email: test@gmail.com is valid
The given email: test@gm+ail.com is invalid

Now, let’s wrap this code inside a function to make it reusabe.

function validateEmail(email) {
  const pattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
  return email.match(pattern)
}

let email = "test@gmail.com";
if(validateEmail(email)) {
  console.log(`The given email: ${email} is valid`);
} else {
  console.log(`The given email: ${email} is invalid`);
}

email = "test@gm+ail.com";
if(validateEmail(email)) {
  console.log(`The given email: ${email} is valid`);
} else {
  console.log(`The given email: ${email} is invalid`);
}

Result:

The given email: test@gmail.com is valid
The given email: test@gm+ail.com is invalid

Regular expression for email validation

/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g

Explanation of above regex

/ /g: g is for global match, and all the / / contains all the patterns to match into

^: Matches from the beginning of the string from the beginning of line

[: Matches all the character in the set

\w: Checks and Matches any word character (alphanumeric and underscore)

-: Matches “-” character

\.: Matches “.” character

]: End of set

+: Match the preceding token

@: sent as a preceding token, @ should be present

(: Groups multiple tokens together, also known as a capture group

[\w-]+\.: Same as previous but, “.” can be used once separated by a character a.b: ✓ and a..b: ✖

): end of the capture group

+[\w-]{2,4}: Match any character in the set and {2,4} tells that the character length should be 2 to 4.

$: Matches till the end of the string or end of the line

Conclusion

So, we look at how to validate email using RegEx in JavaScript, and also touched upon the pattern of RegEx used for it in detail. For a more detailed view of Regular expression look into regexr.com, as it provides an interactive environment for learning, trying, and testing out regular expression and pattern matching. Also, look at password validation using regex.