Skip to content
Related Articles

Related Articles

Improve Article
How to validate email address using RegExp in JavaScript ?
  • Last Updated : 20 Sep, 2019

Given an email id and the task is to validate the email id is valid or not. The validation of email is done with the help of Regular Expressions.

Approach 1:

  • RegExp – It checks for the valid characters in the Email-Id (like, numbers, alphabets, few special characters.)
  • It is allowing every special symbol in the email-id (like, !, #, $, %, ^, &, *) symbols in the Email-Id but not allowing the second @ symbol in ID.

Example: This example implements the above approach.




<!DOCTYPE html> 
<html
  
<head
    <title
        How to validate email address
        using RegExp in JavaScript ?
    </title
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var email = 'GeeksForGeeks@gmail.com';
          
        up.innerHTML = "Click on the button to check the "
                    + "validity of Email Id.<br>" + email; 
          
        function isEmail(email) {
              
            // Regular Expression (Not accepts second @ symbol
            // before the @gmail.com and accepts everything else)
            var regexp = /^(([^<>()\[\]\\.,;:\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,}))$/;
              
            // Converting the email to lowercase
            return regexp.test(String(email).toLowerCase());
        }
          
        function GFG_Fun() { 
            down.innerHTML = isEmail(email);
        
    </script
</body
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • RegExp – It checks for the pattern like anything@anything.anything
  • Not like the previous example, RegExp is accepting every character along with special character multiple times.

Example 2: This example implements the above approach.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to validate email address
        using RegExp in JavaScript ?
    </title
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var email = 'Gee%E^%ksForGeeks@gmail.com';
          
        up.innerHTML = "Click on the button to check the "
                +   "validity of Email Id.<br>" + email; 
          
        function isEmail(email) {
              
            // Regular Expression (Accepts every special
            // character along with @ symbol)
            var regexp = /\S+@\S+\.\S+/;
              
            // Converting the email to lowercase
            return regexp.test(String(email).toLowerCase());
        }
          
        function GFG_Fun() { 
            down.innerHTML = isEmail(email);
        
    </script
</body
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :