09-01-2022, 09:47 PM
JavaScript Validate Email using Regular Expression (regex)
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/09/javascript-validate-email-using-regular-expression-regex.jpg" width="550" height="331" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on September 1st, 2022.</div>
<p>This tutorial helps to learn how to validate email using regular expression (regex) in JavaScript. It has more than one example of how to do email validation.</p>
<p>Those examples differ in the regex patterns used and in the <a href="https://phppot.com/php/php-validate-email/">handling of input email</a>.</p>
<p>The below quick example uses a regex pattern with a JavaScript <em>match()</em> function to validate email. Before finding the match, it converts the input email to lowercase.</p>
<div class="post-section-highlight" readability="41">
<h2>Quick example</h2>
<pre class="prettyprint"><code class="language-javascript">const validateEmail = (email) => { return String(email) .toLowerCase() .match( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/ );
};
</code></pre>
</div>
<p><img loading="lazy" class="alignnone size-large wp-image-19283" src="https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-regex-550x331.jpg" alt width="550" height="331" srcset="https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-regex-550x331.jpg 550w, https://phppot.com/wp-content/uploads/20...00x180.jpg 300w, https://phppot.com/wp-content/uploads/20...68x462.jpg 768w, https://phppot.com/wp-content/uploads/20...-regex.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>Test results</h3>
<p>When receiving an invalid email format, it returns null. Otherwise, it returns an array of content matched with the regex.</p>
<pre><code>Input: vincy#example
Output: null. Input: [email protected]
Output: [email protected],vincy,vincy,,,example.co,,example.co,example.
</code></pre>
<h2>Simple Email Validation in JavaScript using regex</h2>
<p>This simple email validation script does a basic check with the input email string.</p>
<p>It validates the input email if it has the <a href="https://phppot.com/jquery/formatting-date-with-jquery-date-picker/">expected format</a> regardless of the length and the data type.</p>
<p>I have added this example just to understand how to do pattern-based validation with <a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank" rel="noopener">regex in JavaScript</a>.</p>
<p>I prefer to use the quick example and the strict validation example follows.</p>
<p class="code-heading">simple-validation.html</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Simple Email Validation using Regular Expression (regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>JavaScript Simple Email Validation using Regular Expression (regex)</h1> <div class="tile-container"> <form name="form"> <div class="row"> <label for="email">Email address: </label> <input id="email" name="email" /> </div> <div class="row"> <input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /> </div> </form> </div> </div> <script> function matchEmailRegex(emailStr) { var emailRegex = /\S+@\S+\.\S+/; return emailStr.match(emailRegex); }; // validates in the form [email protected] // no more fancy validations function validateEmail(emailField) { var emailStr = emailField.value; if (matchEmailRegex(emailStr)) { alert("Entered value is a valid email."); } else { alert("Entered value is not an email."); } return false; } </script>
</body>
</html>
</code></pre>
<h3>Test results</h3>
<pre><code>Input: vincy
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is a valid email.
</code></pre>
<h2>How to do strict email validation in JavaScript</h2>
<p>This example uses an almost similar regex pattern that is used in the quick example. But, it handles the return value of the JavaScript match to <a href="https://phppot.com/php/php-login-form/">output the validation message</a>.</p>
<p>It gives a code to directly include in an application validation script to validate a form email input.</p>
<p>The alert() can be replaced with any form of letting the end user know about the validation status.</p>
<p class="code-heading">strict-validation.html</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Validate Email using Regular Expression (regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>JavaScript Validate Email using Regular Expression (regex)</h1> <div class="tile-container"> <form name="form"> <div class="row"> <label for="email">Email address: </label> <input id="email" name="email" /> </div> <div class="row"> <input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /> </div> </form> </div> </div> <script> function matchEmailRegex(emailStr) { var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return emailStr.match(emailRegex); }; function validateEmail(emailField) { var emailStr = emailField.value; if (matchEmailRegex(emailStr)) { alert("Entered value is a valid email."); } else { alert("Entered value is not an email."); } return false; } </script>
</body>
</html>
</code></pre>
<h3>Test results</h3>
<p>Unlike the simple example, it strictly validates the email prefix with the allowed special characters.</p>
<p>It also checks the domain name format to validate the email. The following results show the test cases and respective outputs of the JavaScript email validation.</p>
<pre><code>Input: vincy
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is a valid email.
</code></pre>
<p><a class="download" href="https://phppot.com/downloads/javascript/javascript-validate-email-regex.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-validate-email-regex/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/09/...ion-regex/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/09/javascript-validate-email-using-regular-expression-regex.jpg" width="550" height="331" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on September 1st, 2022.</div>
<p>This tutorial helps to learn how to validate email using regular expression (regex) in JavaScript. It has more than one example of how to do email validation.</p>
<p>Those examples differ in the regex patterns used and in the <a href="https://phppot.com/php/php-validate-email/">handling of input email</a>.</p>
<p>The below quick example uses a regex pattern with a JavaScript <em>match()</em> function to validate email. Before finding the match, it converts the input email to lowercase.</p>
<div class="post-section-highlight" readability="41">
<h2>Quick example</h2>
<pre class="prettyprint"><code class="language-javascript">const validateEmail = (email) => { return String(email) .toLowerCase() .match( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/ );
};
</code></pre>
</div>
<p><img loading="lazy" class="alignnone size-large wp-image-19283" src="https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-regex-550x331.jpg" alt width="550" height="331" srcset="https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-regex-550x331.jpg 550w, https://phppot.com/wp-content/uploads/20...00x180.jpg 300w, https://phppot.com/wp-content/uploads/20...68x462.jpg 768w, https://phppot.com/wp-content/uploads/20...-regex.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>Test results</h3>
<p>When receiving an invalid email format, it returns null. Otherwise, it returns an array of content matched with the regex.</p>
<pre><code>Input: vincy#example
Output: null. Input: [email protected]
Output: [email protected],vincy,vincy,,,example.co,,example.co,example.
</code></pre>
<h2>Simple Email Validation in JavaScript using regex</h2>
<p>This simple email validation script does a basic check with the input email string.</p>
<p>It validates the input email if it has the <a href="https://phppot.com/jquery/formatting-date-with-jquery-date-picker/">expected format</a> regardless of the length and the data type.</p>
<p>I have added this example just to understand how to do pattern-based validation with <a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank" rel="noopener">regex in JavaScript</a>.</p>
<p>I prefer to use the quick example and the strict validation example follows.</p>
<p class="code-heading">simple-validation.html</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Simple Email Validation using Regular Expression (regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>JavaScript Simple Email Validation using Regular Expression (regex)</h1> <div class="tile-container"> <form name="form"> <div class="row"> <label for="email">Email address: </label> <input id="email" name="email" /> </div> <div class="row"> <input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /> </div> </form> </div> </div> <script> function matchEmailRegex(emailStr) { var emailRegex = /\S+@\S+\.\S+/; return emailStr.match(emailRegex); }; // validates in the form [email protected] // no more fancy validations function validateEmail(emailField) { var emailStr = emailField.value; if (matchEmailRegex(emailStr)) { alert("Entered value is a valid email."); } else { alert("Entered value is not an email."); } return false; } </script>
</body>
</html>
</code></pre>
<h3>Test results</h3>
<pre><code>Input: vincy
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is a valid email.
</code></pre>
<h2>How to do strict email validation in JavaScript</h2>
<p>This example uses an almost similar regex pattern that is used in the quick example. But, it handles the return value of the JavaScript match to <a href="https://phppot.com/php/php-login-form/">output the validation message</a>.</p>
<p>It gives a code to directly include in an application validation script to validate a form email input.</p>
<p>The alert() can be replaced with any form of letting the end user know about the validation status.</p>
<p class="code-heading">strict-validation.html</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Validate Email using Regular Expression (regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>JavaScript Validate Email using Regular Expression (regex)</h1> <div class="tile-container"> <form name="form"> <div class="row"> <label for="email">Email address: </label> <input id="email" name="email" /> </div> <div class="row"> <input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /> </div> </form> </div> </div> <script> function matchEmailRegex(emailStr) { var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return emailStr.match(emailRegex); }; function validateEmail(emailField) { var emailStr = emailField.value; if (matchEmailRegex(emailStr)) { alert("Entered value is a valid email."); } else { alert("Entered value is not an email."); } return false; } </script>
</body>
</html>
</code></pre>
<h3>Test results</h3>
<p>Unlike the simple example, it strictly validates the email prefix with the allowed special characters.</p>
<p>It also checks the domain name format to validate the email. The following results show the test cases and respective outputs of the JavaScript email validation.</p>
<pre><code>Input: vincy
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is not an email. Input: [email protected]
Output: Entered value is a valid email.
</code></pre>
<p><a class="download" href="https://phppot.com/downloads/javascript/javascript-validate-email-regex.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-validate-email-regex/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/09/...ion-regex/