Do you want to validate an email address in JavaScript? And you’re wondering what the best way to do it is. In this article, you will learn how to validate email addresses in JavaScript using Regex and see code examples.
Regular expressions, which are patterns that match character combinations in strings, are used to perform string matching. You can use the Regex Objects[1] in JavaScript to match any type of String you want.
Validate Email Address In JavaScript using Regex
You can use simple letters, such as the ABC pattern, or you can combine them with more complex characters, such as the ab*c pattern, to create a regular expression pattern. A simple pattern of characters you know you want to find quickly is used to find a straight match.
Also in email validation, you need to make sure that you are following an RFC 822 compliant Regex.
Let’s look at how to validate an email address in JavaScript using Regex in the code below.
//JavaScript Code Example
function validateEmail(inputEmail){
//Initializing Regex for Email
const re = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
return re.test(inputEmail);
}
var listEmails = ["Gautam+@gmail.com", "asdh@fgdsg.com", "a@as", "gmail@gmail.gmail", "coduber@gmail.com"]
listEmails.forEach(function(email){
var isValid = validateEmail(email);
if(isValid){
console.log(email + " is Valid Email Address.");
}else{
console.log(email + " is Not Valid Email Address.");
}
});
Output:
Gautam+@gmail.com is Not Valid Email Address.
asdh@fgdsg.com is Valid Email Address.
a@as is Not Valid Email Address.
gmail@gmail.gmail is Not Valid Email Address.
coduber@gmail.com is Valid Email Address.As you can see in the above code, you can filter out the majority of the incorrect email addresses by using the regex mentioned above. However, you should be aware that this regex will not eliminate all incorrect email addresses.
There may be a few cases (less than one percent) where you can still pass this check. As a result, you may need to manually filter those addresses, or you can later add them to the code to check for specific cases.
And here is the most basic email validation in JavaScript, which you can use in your frontend code if necessary.
Validate Email Address Using HTML
If you are a frontend developer, you should always use the HTML built-in pattern matching code to filter out invalid email addresses.
Let’s look at an example code that shows how to validate email addresses using HTML and no JavaScript.
<!-- HTML Code Example -->
e<!DOCTYPE html>
<html>
<body>
<p>Testing A Form to Check Email</p>
<form action="/do_something.html">
E-mail: <input type="email" id="inputEmail" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
<script>
function confirmEmail() {
var x = document.getElementById("inputEmail").pattern;
//Pass this valid email to backend if required.
document.getElementById("someElementPageId").innerHTML = x;
}
</script>
</body>
</html>
Output:
coduber@coduber.com is valid email address.As you can see in the above code, I was able to create an input element as email, and HTML internally checks the text box to see if the input box contains a valid email address. You can also check the same email address with the regex pattern.
Wrap Up
I hope you received an answer to your question about how to validate email addresses using Regex in JavaScript or HTML. It is critical that you use the correct regex string that is in accordance with the industry standard.
If you have a better method than the one described above, please let me know in the comments section and I will gladly include it here.
If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.
Further Read:
