In web development, email validation is very curial to ensure that the entered email id of a user is correct or not. It is an important aspect of a website that requires registration or a contact form. A validated email address helps in communications and reduces the risk of delivery failures.

In Javascript, we can use the regular expression to perform email validation. Regular expressions also known as regex or regexp are powerful tools to do pattern matching and different validations. They can be used to check strings like email if they match a specific pattern or not.

In this article, we will use regex to validate entered email addresses by users in a form using Javascript.

Understanding Regular Expression

A regular expression is a sequence of characters that can define a pattern. We can use this pattern to manipulate a string or use it to check if a specific string is in a specific format.

The syntax of regular expression can be complex depending on the use-case. However, some of the commonly used characters in a regex are:

1. ^ – matches the start of a string
2. $ – matches the end of a string
3. . – matches any single character
4. * -matches zero or more of the preceding character
5. + -matches one or more of the preceding character
6. ? – makes the preceding character optional

Using Regular Expression in Javascript

In Javascript, we can create a regular expression by using the RegExp constructor or by enclosing the pattern in forward slashes.

For example:

const reg_exp = new RegExp()

//OR

const reg_exp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/

Once the regular expression is created, we can use methods like test(), match(), exec(), and replace() to manipulate or search a string.

Next, let’s create a function to validate email addresses from a form on our webpage.

Validate email address using regex

To do email validation in Javascript we have to use the regular expression to check the presence of the @ character in the string.

So to do an email validation we can use the following expression:

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

We can write a function in javascript to check the pattern when we submit a form.

function validateEmail(email) {
    let regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
    return regex.test(email);
}

console.log(validateEmail("[email protected]")); // true
console.log(validateEmail("example.email.com")); // false
console.log(validateEmail("[email protected]")); // false

The test() method is used to check if a regular expression matches a string. It returns a boolean indicating whether the email address is valid or not.

Conclusion:

This is a very simple solution to validate an email address and it may not catch all invalid emails. There are more complex patterns that can be used for that purpose.

It is also important to note that writing a regex expression is not the only solution, there are various javascript libraries that can be used to do email validation which will give you more precise results.

Some of the libraries you can use are:

1. validatorjs/validator.js: String validation
2. email-validator
3. kickbox