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.
