Geek Answers Handbook

Understanding Email Authentication Using JavaScript

I am new to JavaScript and found this JavaScript code on the web that validates a given email address (no code issues) -

<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 problems with the code, but for some reason I did not understand what the regular expression /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ . I do not understand what each part of the regular expression means. Please enlighten me.

+7
source share
8 answers

  • The two forward slashes /.../ contain a regular expression.

  • Leading and trailing $ correspond to the beginning and end of the input line, respectively. That is, the entire input string must match this regular expression, and not part of the input string.

  • \ w + matches 1 or more word characters (az, AZ, 0-9 and underscore).

  • [.-] matches the character. or -. We need to use. represent. as. has a special meaning in regexe. \ Known as an escape code that restores the original letter of the next character.

  • [.-]? matches 0 or 1 occurrences of [.-].

  • Again, \ w + matches 1 or more word characters.

  • ([.-]? \ w +) * matches 0 or more occurrences of [.-]? \ w +.

  • The submenu \ w + ([.-]? \ W +) * is used to match the username in the letter, before the @ sign. It starts with at least one character in the word (az, AZ, 0-9 and underscore), followed by other characters in the word or. or -. However a. or - must follow the word character (az, AZ, 0-9 and underscore). That is, the line cannot contain "..", "-", ".-" or "-.". An example of a valid string is "a.1-2-3".

  • @ matches itself.

  • Again, the subexpression \ w + ([.-]? \ W +) * is used to match the email domain name with the same pattern as the username described above.

  • The subexpression. \ W {2,3} corresponds to a. followed by two or three words, for example, ".com", ".edu", ".us", ".uk", ".co".

  • (. \ w {2,3}) + indicates that the aforementioned subexpression should occur one or more times, for example, ".com", ".co.uk", ".edu.sg", etc.

Link

+13
source

Try it here REGEX

You can find a detailed explanation.

+3
source

Here's a breakthrough in regular expression in parts:

/^ => start of line

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

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

@\w+ => an with the character (@) follows any word repeated one or more times

([\.-]?\w+)* => a group of [optional period or dash after any word repeated 1 or more times], which may be repeated 0 or more times

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

$/ => end of line

By the way, here is a really good Introduction to the regular expressions available on Codular .

+3
source

try it

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

It worked for me

+3
source

here you go. regular expression renderer

Regex Visualizer and A JS Fiddle Regex Explained

+2
source 
 /^(\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+[,;]?[ ]?)+$/

this little beauty will allow you to enter one or more email addresses per line, ending with a comma or semicolon, and then extra space. :)

+1
source 
 function validchat(){ $('#btn-input-email').blur(function() { if($(this).val() != '') { var pattern = /^([a-z0-9_\.-]) +@ [a-z0-9-]+\.([az]{2,4}\.)?[az]{2,4}$/i; if(pattern.test($(this).val())){ $(this).css({'border' : '1px solid #569b44'}); $('#valid').text(''); } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid').text(' '); } } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid').text(' email    '); } }); $("#btn-input-text").blur(function() { var textlength = $(this).val().trim().length; if( textlength < 2 ){ $(this).css({'border' : '1px solid #ff0000'}); $('#validtext').text(' 2 '); }else{ $(this).css({'border' : '1px solid #569b44'}); $('#validtext').text(''); } }); var valid = $('#valid').text(); var validtext = $('#validtext').text(); if((!valid || valid == '') && (!validtext || validtext == '')){ return true; } } validchat(); function AjaxChat () { $('#btn-input-email , #btn-input-text').blur(); var valid = validchat(); if(valid){ var email = $('#btn-input-email').val(); var text = $('#btn-input-text').val(); var data = { email:email, text:text } $.ajax({ url: location.origin+"/chat_block.php", //dataType: "json", ////  type: "POST", async: false, data: data, success: function(html) { if(!html || html == 'null') AjaxChat (); if (jQuery.html != "") { var b_chat = $('.chat-customer').html(); var chat = ': '; var obj = $.parseJSON(html); chat += '<span>'; chat += obj['text']; chat += '</span>'; chat += '<br /><br />'; $('.chat-customer').html(b_chat + chat); $('#btn-input-text , #btn-input-email').val(""); } }, error: function() { //cosole.log('No result'); } }); $('#btn-input-email').remove(); } }
0
source

This verification code is NOT valid for email addresses. In particular, this does not resolve the address of the form first+last@domain.com. This is a widespread error found on many commercial sites (but not on stackoverflow - congratulations!).

0
source

More articles:


All Articles