understanding email validation using JavaScript

javascript regex email-validation

22,187

Solution 1

The two forward-slashes /.../ contains a regexe.
The leading ^ and trailing $ match the beginning and the ending of the input string, respectively. That is, the entire input string shall match with this regexe, instead of a part of the input string.
\w+ matches 1 or more word characters (a-z, A-Z, 0-9 and underscore).
[.-] matches character . or -. We need to use . to represent . as . has special meaning in regexe. The \ is known as the escape code, which restore the original literal meaning of the following character.
[.-]? matches 0 or 1 occurrence of [.-].
Again, \w+ matches 1 or more word characters.
([.-]?\w+)* matches 0 or more occurrences of [.-]?\w+.
The sub-expression \w+([.-]?\w+)* is used to match the username in the email, before the @ sign. It begins with at least one word character (a-z, A-Z, 0-9 and underscore), followed by more word characters or . or -. However, a . or - must follow by a word character (a-z, A-Z, 0-9 and underscore). That is, the string cannot contain "..", "--", ".-" or "-.". Example of valid string are "a.1-2-3".
The @ matches itself.
Again, the sub-expression \w+([.-]?\w+)* is used to match the email domain name, with the same pattern as the username described above.
The sub-expression .\w{2,3} matches a . followed by two or three word characters, e.g., ".com", ".edu", ".us", ".uk", ".co".
(.\w{2,3})+ specifies that the above sub-expression shall occur one or more times, e.g., ".com", ".co.uk", ".edu.sg" etc.

Reference

Solution 2

Try this

E-mail: <input type="email" name="usremail">

It worked for me

Solution 3

Give a try here REGEX

you can find a detailed explanation.

Solution 4

Here's a break down of the regular expression piece-by-piece:

/^ => beginning of a line

\w+ => any word (letters, numbers, and underscores) repeated 1 or more times

([\.-]?\w+)* => a group of [an optional period (.) or dash (-) followed by any word repeated one or more times] that can be repeated 0 or more times

@\w+ => an at symbol (@) follow by any word repeated one or more times

([\.-]?\w+)* => a group of [an optional period or dash followed any word repeated 1 or more times] that can be repeated 0 or more times

(\.\w{2,3})+ => a group of [a period followed by any word that can be repeated 2-3 times] that can be repeated 1 or more times

$/ => the end of a line

By the way, here is a really good Introduction to Regular Expressions available on Codular.

Solution 5

here you go. a visualizer for regex

Regex Visualizer and A JS Fiddle Regex Explained

View more solutions

22,187

Author by

AlwaysALearner

Updated on March 30, 2020

Comments

AlwaysALearner over 4 years

I am new to JavaScript and found this JavaScript code in the internet that validates the given email (no issue with the code) -

<html>
<h2>Email Validation</h2>
<script language = "Javascript">
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)){
document.write("You have entered valid email.");
return true;
}    
return false;
}

function ValidateEmail(){
    var emailID=document.form.email;

    if ((emailID.value==null)||(emailID.value=="")){
        alert("Please Enter your Email ID")
        emailID.focus()
        return false
    }

    if (checkEmail(emailID.value)==false){
        emailID.value=""
        alert("Invalid Email Adderess");
        emailID.focus()
        return false
    }
        alert('valid');
        return true
 }
</script>

<form name="form" method="post" onSubmit="return ValidateEmail()">    
Enter an Email Address : <input type="text" name="email" size="30"><br>    
<input type="submit" name="Submit" value="Submit">    
</form>

</html>

I have no issues with the code, but I somehow failed to understand what the regular expression /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ means. I don't understand what each and every part of regular expression means. Please enlighten me.

Wojtek about 7 years

In 8. this part is not entirely true -- "However, a . or - must follow by a word character" -- because you can have an email address where - is followed by @ -- for example like this [email protected]
BradChesney79 over 5 years

/^\w+([\.\+-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email‌) Modified to be inclusive of the "+" character... for what it is worth. That allows the [email protected] format email addresses through. ...gmail allows you to append a "+anything" text chunk to your gmail account name. It isn't a gmail exclusive feature. No, I don't know an exhaustive list of which services allow it. Also, stop downvoting this Debbie Downer, he is spilling out truth. Maybe he is an asshole, but he is not wrong.
David Sinclair over 5 years

In order to allow longer TLDs (like .domain) I had to change the {2,3} to {2,64}