Eg Email Validation with JavaScript (Regex)

Many times we are presented with the need to validate that an email address is entered in a certain field of our form. valid email. In this article, we'll learn how to validate emails using regular expressions (also known as regex) in JavaScript.

What is a regular expression (regex)?

A regular expression is a sequence of characters that defines a search pattern. In this case, we want to find a pattern that represents a valid email address.

Regular expressions are a powerful and flexible tool for working with text strings and validating input data.

Email validation with regex

To validate that an email is valid, we have to verify that the format is correct, that is, that it includes an @ and a domain. For this we use the following expression:

var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Full Form Example

In the following example we show how to validate an email address using JavaScript and a regular expression. The steps we follow are:

1. We define a function called validateMail that takes as argument the email to validate.
2. We create a variable regex A containing the regular expression to validate the email.
3. We use the method test() of the regular expression to check if the email entered matches the pattern.
4. If the email is valid, we display an alert message indicating that it is valid; otherwise, we display an alert message indicating that it is invalid.
5. In the HTML, we create an input field of type "email" and a button that, when clicked, calls the function validateMail with the value entered in the input field.

function validateEmail (mail) {
// Regular expression to validate email
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Check if the mail matches the pattern defined by the regular expression
if (regex.test (mail)) {
alert("Valid email");
} else {
alert("Invalid Email");
}
}

Email validation with JavaScript and regex

Validate

Advantages and Disadvantages of validating with JavaScript

Validating input data, such as email addresses, using JavaScript on the client side has advantages and disadvantages:

Advantages	Disadvantages
Immediate feedback for the user	Is not safe
Less load on the server	Cross Browser Compatibility
Improve user experience	Duplication of effort (client/server side)
Response time reduction	Does not replace validation on the server side

Validating data using JavaScript is not a substitute for server-side validation. However, it helps to reduce the load. To validate data on the server side I recommend you read:

• Mail Validation with PHP