Sick Gaming
[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) =&gt; { return String(email) .toLowerCase() .match( /^(([^&lt;&gt;()[\]\\.,;:\s@"]+(\.[^&lt;&gt;()[\]\\.,;:\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">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;JavaScript Simple Email Validation using Regular Expression (regex)&lt;/title&gt;
&lt;link rel='stylesheet' href='style.css' type='text/css' /&gt;
&lt;link rel='stylesheet' href='form.css' type='text/css' /&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="phppot-container"&gt; &lt;h1&gt;JavaScript Simple Email Validation using Regular Expression (regex)&lt;/h1&gt; &lt;div class="tile-container"&gt; &lt;form name="form"&gt; &lt;div class="row"&gt; &lt;label for="email"&gt;Email address: &lt;/label&gt; &lt;input id="email" name="email" /&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; 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; } &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</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">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;JavaScript Validate Email using Regular Expression (regex)&lt;/title&gt;
&lt;link rel='stylesheet' href='style.css' type='text/css' /&gt;
&lt;link rel='stylesheet' href='form.css' type='text/css' /&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="phppot-container"&gt; &lt;h1&gt;JavaScript Validate Email using Regular Expression (regex)&lt;/h1&gt; &lt;div class="tile-container"&gt; &lt;form name="form"&gt; &lt;div class="row"&gt; &lt;label for="email"&gt;Email address: &lt;/label&gt; &lt;input id="email" name="email" /&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form.email)" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; function matchEmailRegex(emailStr) { var emailRegex = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\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; } &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</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/