- In This Tutorial I Explain How Validate Email Using Regex Expression.
- Firstly take textbox in HTML See in Examle.
- After that Call JavaScript function on text box OnKeyPress.
- Click on text box and enter Email if Email is not valid then show validation error Message, see above Example
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function EmailValidation(emailField)
{
var reg = /^\w+([-+.']\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(emailField.value) == false)
{
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
}
</script>
</head>
<body>
<h3>Email validation using Regex Expression</h3>
<table>
<tr>
<td>Email </td>
<td>: </td >
<td>
<input onkeypress="EmailValidation(this)" type="text"/>
<span id="error" style="color:red;display:none">* Invalid Email Id</span>
</td>
</tr>
</table>
</body>
</html>
OutPut - <html>
<head>
<script type="text/javascript">
function EmailValidation(emailField)
{
var reg = /^\w+([-+.']\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(emailField.value) == false)
{
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
}
</script>
</head>
<body>
<h3>Email validation using Regex Expression</h3>
<table>
<tr>
<td>Email </td>
<td>: </td >
<td>
<input onkeypress="EmailValidation(this)" type="text"/>
<span id="error" style="color:red;display:none">* Invalid Email Id</span>
</td>
</tr>
</table>
</body>
</html>
Mobile no validation using regex javascript
In This Tutorial I Explained How to validate Phone number using regular expression in javascriptsss.
Firstly take textbox in HTML See in Examle.
After that Call JavaScript function on text box OnKeyPress.
If We Enter Mobile No and obile no is not valid then show validation error message using javascript see above example
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MobileNumValidation(e) {
var reg = /^(7|8|9)\d{9}$/
if (reg.test(e.value) == false) {
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
} </script>
</head>
<body>
<h2>Mobile Num validation using Regex Expression</h2>
<table>
<tr>
<td>Mobile No
<td>
<td>: </td >
<td>
<input onkeypress="MobileNumValidation(this)" type="text"/>
<span id="error" style="color:red">* Enter valid Mobile Num</span>
</td>
</tr>
</table>
</body>
</html>
Example
<html>
<head>
<script type="text/javascript">
function MobileNumValidation(e) {
var reg = /^(7|8|9)\d{9}$/
if (reg.test(e.value) == false) {
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
} </script>
</head>
<body>
<h2>Mobile Num validation using Regex Expression</h2>
<table>
<tr>
<td>Mobile No
<td>
<td>: </td >
<td>
<input onkeypress="MobileNumValidation(this)" type="text"/>
<span id="error" style="color:red">* Enter valid Mobile Num</span>
</td>
</tr>
</table>
</body>
</html>
Age Validation Using Regex expression in Javascript
- In This Tutorial I Explain How Validate only Age in Specific range.
- Firstly take textbox in HTML See in Examle.
- After that Call JavaScript function on text box OnKeyPress.
- Click on text box and enter Age if age not in proper range then show validation error using javascript Regex expression, see above example
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function AgeValidation(AgeField)
{
var reg = /^([0]?[1-9]{1,2})$/
if (reg.test(AgeField.value) == false) {
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
}
</script>
</head>
<body>
<h3>Age validation using javascript</h3>
<table>
<tr>
<td>Age
</td>
<td>: </td >
<td>
<input onkeypress="AgeValidation(this)" type="text"/>
<span id="error" style="color:red;display:none">* Age Should be in between rang 10 to 99</span>
</td>
</tr>
</table>
</body>
</html>
OutPut-<html>
<head>
<script type="text/javascript">
function AgeValidation(AgeField)
{
var reg = /^([0]?[1-9]{1,2})$/
if (reg.test(AgeField.value) == false) {
document.getElementById("error").style.display = "inline";
}
else
document.getElementById("error").style.display = "none";
}
</script>
</head>
<body>
<h3>Age validation using javascript</h3>
<table>
<tr>
<td>Age
</td>
<td>: </td >
<td>
<input onkeypress="AgeValidation(this)" type="text"/>
<span id="error" style="color:red;display:none">* Age Should be in between rang 10 to 99</span>
</td>
</tr>
</table>
</body>
</html>
Numeric Validation-Accept Only Numeric value
- In This Tutorial I Explain How Validate only numeric value.
- Firstly take textbox in HTML See in Examle.
- After that Call JavaScript function on text box OnKeyPress.
- If We Click on text box then show validation error using javascript see above example.-
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e)
{
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</head>
<body>
<h2>Numeric validation using javascript</h2>
<table>
<tr>
<td>Employee Salary
</td>
<td>: </td >
<td>
<input önkeypress="return IsNumeric(event)" type="text" />
<span id="error" style="color:red;display:none">* Input digits (0 - 9) </span>
</td>
</tr>
</table>
</body>
</html>
OutPut-<html>
<head>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e)
{
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</head>
<body>
<h2>Numeric validation using javascript</h2>
<table>
<tr>
<td>Employee Salary
</td>
<td>: </td >
<td>
<input önkeypress="return IsNumeric(event)" type="text" />
<span id="error" style="color:red;display:none">* Input digits (0 - 9) </span>
</td>
</tr>
</table>
</body>
</html>
0 comments :
Post a Comment