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> 