Email Validation Regex JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of email validation regex JavaScript, validation of email is a very interesting subject and that is more interesting when we relate this with JavaScript.
As we know emails today are mostly used everywhere. And there are many ways with help of which we can apply validation on JavaScript.
And today, we are going to understand validation using the regex method whereas regex stands for the regular expression.
So, let us see how to apply validation on email using the regex method in JavaScript.
Step By Step Guide On Email Validation Regex JavaScript :-
Here, as we know that email addresses may contain:
- Uppercase and lowercase alphabets
- Numeric digits
- Special characters like @
- And full stop with conditions like they are not first and last character of email address and not repeat continuously.
Now, as we know what emails contain. So, it become now easy for us to apply for validations.
And as already said today this is done with the help of Regular Expression. Let us first see the Regular expression method that we going to use for email validation.
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/So, this regular expression validates an email address in JavaScript. Let us see an example for a better understanding to see how to use this expression for validation.
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1> TalkersCode - JavaScript validation </h1>
<h2> Email validation regex JavaScript </h2>
<form name="form" action="#">
<input type='text' name='email'/>
// we are not going to use the input field with type email because we want to apply custom validation with help of JavaScript.
<input type="submit" name="submit" value="Submit" onclick="ValidateEmailAddress(email)"/>
</form>
<script>
testEmail = document.getElementById('email').value;
function ValidateEmailAddress(testEmail)
{
var formatExp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(testEmail.value.match(formatExp))
{
alert(" Email address given is valid ");
return true;
}
else
{
alert("You have entered an invalid email address, try again later ");
return false;
}
}
</script>
</body>
</html>- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of HTML. For this, we use HTML, head, title, and body with a script tag. We hope you know about the basic structure of HTML and which HTML tag is used for which concept.
- Now, when we look inside the body tag. Here, we see some headings tags and a script tag. Heading tag again is a concept of HTML, whereas script relates to JavaScript.
- JavaScript is written always inside the script tag. Where the script is a paired tag so it also has a closing tag. Now inside these script tags, we write our JavaScript code.
- Here, we first see that we create a form inside the body with input type text and a button to submit that data.
- Now, let us understand our JavaScript codes. Inside our JavaScript codes. We create a function that gets called when we submit a form using the button.
- Inside this function, we store the expression which we want in the email address inside a variable. And match that format with text that the user feeds using the if condition. Here, if the data submitted by the user is valid. Then a message with a text Email address valid displayed on the screen otherwise if the data does not match the text has a message you have entered an invalid email address, try again later executed.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we can understand how to apply validation to emails in JavaScript.
I hope this tutorial on email validation regex JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
