[Tut] JavaScript Validate Email using Regular Expression (regex) - Printable Version +- Sick Gaming (https://www.sickgaming.net) +-- Forum: Programming (https://www.sickgaming.net/forum-76.html) +--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html) +--- Thread: [Tut] JavaScript Validate Email using Regular Expression (regex) (/thread-99889.html) |
[Tut] JavaScript Validate Email using Regular Expression (regex) - xSicKxBot - 09-01-2022 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/2022/09/javascript-validate-email-using-regex-300x180.jpg 300w, https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-regex-768x462.jpg 768w, https://phppot.com/wp-content/uploads/2022/09/javascript-validate-email-using-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/01/javascript-validate-email-using-regular-expression-regex/ |