Open In App

How to validate email address using RegExp in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:


Last Updated : 20 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads