Journey from Basic to Advance Java: How to give validation for email id and mobile number using pattern matching in java script

Saturday, 25 May 2013

How to give validation for email id and mobile number using pattern matching in java script

This is html file which checks for proper email id and mobile number using pattern matching in java script.

 <html>  
 <head>  
 <style>  
 .message  
 {  
 border:0px solid black;  
 background-color:orange;  
 height:20px;  
 width:180px;  
 text-align:center;  
 display:none;  
 }  
 .header11  
 {  
 border:0px solid black;  
 background-color:orange;  
 height:20px;  
 width:180px;  
 text-align:center;  
 display:none;  
 }  
 </style>  
 <script>  
 function validation()  
 {  
   var name=document.getElementById("name").value;  
   var email=document.getElementById("email").value;  
   var mono=document.getElementById("mono").value;  
   var add=document.getElementById("add").value;  
   var loc=document.getElementById("loc").value;  
   if(name=="" && email=="" && mono=="" && add=="" && loc=="")  
   {  
           document.getElementById("name").focus();  
     alert("please Fill the information!");  
     return false;  
   }  
      else if(name=="")  
   {  
             document.getElementById("name").value="";  
             document.getElementById("name").focus();  
       alert("please enter name");  
       return false;  
   }  
   else if(!email.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/) || email=="")  
   {  
     alert("please enter Email id");  
           document.getElementById("email").value="";  
     document.getElementById("email").focus();  
     return false;  
   }  
   else if(!mono.match (/^(\+91-|\+91|0|9)?\d{10}$/) || mono=="")  
   {  
     alert("please enter Mobile Number");  
     document.getElementById("mono").value="";  
     document.getElementById("mono").focus();  
     return false;  
   }  
   else if(add.trim()=="")  
   {  
     alert("please enter Address");  
     document.getElementById("add").value="";  
     document.getElementById("add").focus();  
     return false;  
   }  
   else if (!loc.match(/^[a-zA-Z]+$/) || loc=="")  
   {  
     alert("please enter Location");  
     document.getElementById("loc").value="";  
     document.getElementById("loc").focus();  
     return false;  
   }  
   else  
        return true;  
 }  
 </script>  
 </head>  
 <body>  
 <div class="header">  
 <div class="header11" id="demo">All Fields manadatory</div>  
 <form action="connect.jsp" onsubmit="return validation()">  
 <div>Name<input type="text" id="name"></div></div>  
 <div>Email<input type="text" id="email" ></div>  
 <div>Mobile No<input type="text" id="mono"></div>  
 <div>Address<textarea rows="5" cols="20" id="add"></textarea></div>  
 <div>Location<input type="text" id="loc"></div>  
 <input type="submit" value="submit">  
 </form>  
 </div>  
 </body>  
 </html>

Here we use meta-characters (can have special meanings in patterns--do not match themselves)
meta-characters are: \ | ( ) [ ] { } ^ $ * + ? .

A meta-character is treated as a normal character if it is back-slashed.
period is a special meta-character which matches any character except newline

In some places we use [],that means we can specify a sequence of characters ex..[abcd]. this exactly matches the specified text.we also specify the range or spans of characters by giving dashes.
ex:[a-z] this matches a character with small letter a to z .
A caret at the left end of a class definition means the opposite.

Character class abbreviations

Abbr. Equiv. Pattern Matches

\d [0-9] a digit
\D [^0-9] not a digit
\w [A-Za-z_0-9] a word character
\W [^A-Za-z_0-9] not a word character
\s [ \r\t\n\f] a whitespace character
\S [^ \r\t\n\f] not a whitespace character

Quantifiers

{n} exactly n repetitions
{m, n} at least m but not more than n
repetitions

Other quantifiers (just abbreviations for the most commonly used quantifiers)
* means zero or more repetitions
e.g., \d* means zero or more digits

+ means one or more repetitions
e.g., \d+ means one or more digits

? Means zero or one
e.g., \d? means zero or one digit

Anchors

The pattern can be forced to match only at the
left end with ^; at the end with $

e.g.1 (mobile number):
(/^(\+91-|\+91|0|9)?\d{10}$/)
in this example we are checking for the proper mobile number.
we gave the expression inside the / / symbol.So that expression will be compared to check the valid contact number.
here we have given \ symbol.so that the literal meaning(plus) will be retained.
^ symbol is to check at the starting of the expression.

so here we are checking for +91 at the starting of the expression. The meaning of | symbol is 'or' meaning, if the previous condition doesn't match,it checks with the second pattern.so /^(\+91-|\+91|0|9) is to check +91 'or' +90. and ? symbol is to check 1 or more occurrence of the previous pattern.and finally \d{10}$/ is for checking 10 digits at the end of the expression.

e.g.2 (email):
if(!email.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/) || email=="")

here we have given caret symbol inside / / that means it should check at the starting of the expression.
and also we specified the range..
so ^[_a-z0-9-]+ is to find one or more occurrence of small letter a to z and digits from 0 to 9 at the starting of the expression.

(\.[_a-z0-9-]+)* is to literally match the " . " symbol since its literal meaning is obtained by giving \ symbol and one or more occurrence of alphabets and numeric. * symbol is to check zero or more occurrence of the pattern.

(\.[a-z]{2,3})$/) and $ at the end of the expression means it checks the pattern at the end of the expression.
here a character should be there at least 2 times but not more than 3 times.