What is Pattern Validation ?
This process checks whether the data entered in the form, matches the particular pattern/condition or not.
This is the second level of validating the data, which matches our patterns.
This is also called as conditional data checking process, which checks for certain conditions.
Why is pattern validation used ?
Pattern validation is used to prevent our webpage abused by malicious users.
This also prevents security vulnerabilities.
This also prevents the attacks like SQL injections, Virus etc.
Javascript basic tutorial !!!
Click to Learn More about – Javascript online learning
1. Pattern Field Validation
This is the second level of form validation process.
1. Email Id should be valid and matches the regex pattern defined by us.
Code Example :
<script>
function check_Email(mail){
var regex = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@{[a-zA-Z0-9_\-\.]+0\.([a-zA-Z]{2,5}){1,25})+)*$/;
if(regex.test(f1.Email.value)){
alert("Congrats! This is a valid Email email");
return true;
}
else{
alert("This is not a valid email address");
return false;
}
}
</script>
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 35%;
height: 30%;
text-align:left;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 35%;
height: 30%;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:200px;
height:30px;
font-size: 20px;
}
</style>
<script>
function check_Email(mail){
var regex = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@{[a-zA-Z0-9_\-\.]+0\.([a-zA-Z]{2,5}){1,25})+)*$/;
if(regex.test(f1.Email.value)){
alert("Congrats! This is a valid Email email");
return true;
}
else{
alert("This is not a valid email address");
return false;
}
}
</script>
</head>
<body>
<form name="f1" onSubmit="return check_Email(this)">
<div id="dId-1">
<p>Email : <input type="text" name="Email" style="width:300px;"> ** ( Should be valid ) </p>
</div>
<div id="dId-2">
<input type="submit" name="submit" value="Submit" style="width: 200px;height: 60px;font-size: 50px;color: green;background-color: #bfdbef;">
<div>
</form>
</body>
</html>
Output :
1. Entering invalid Email Id
2. Entering valid Email Id
