Write an article or Share a link

Email validation in javascript using regular expression with match()

HTML Javascript
profile-image - Html Hints
Gaurav
2019-08-28 403
Email validation in javascript using regular expression with match()

Email validation in javascript using regular expression with match()


Many of us know how to Validate Email through php well thats server side validation & also somewhat time taking as first you need to call server file after submittion the form but using javascript you can easily validate email by using many javascript function such as onkeyup() onchange() and many more! After calling a function use RegExp of javascript to validate email as shown below.

Demo for email validation

It will validate according to the expression which we define below! If after press submit button, page will reload that means email format is correct otherwise it will show error

Try It

Lets start by creating one files:

  • 1. Index.html - for our markup & javascript code manupulation
# In Markup

In markup! You need to define form filed using HTML attribute input[type="email"] and then call any function according to your need & then validate with expression given below

Also there is input attribute know as Pattern which also can use to validate form. Pattern Attribute in input tag will look like bellow


<input type="email" id="email"  name="email"  pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$">
                      

Lets! go through the code to validate form using Javascript Expression.


var emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 
    

In above code, it will validate email that defines it should start with alphabet and at the last after . there should be minimum 2 letters such as

Var emailRegex stores expression to validate email now call that variable with your syntax & validate email. Also, Below i'm showing how i validate email with javascript syntax

In below code, You can see that i used match() function to validate email with the expression i define earlier


document.getElementById('email').match(emailRegex);
    

your@mail.in

Here you can see that at last there are 2 letters in after . because at last there are minimum 2 letters ending which indicates its domain and also its prevent from spam entries

Also you can try it in Demo

More Great Articles