Jquery validate adds custom validation rule of validate mailbox zip code
- 2020-03-30 00:44:50
- OfStack
JQuery: validate adds custom validation
JQuery. The validator. AddMethod add custom validation rules
AddMethod: name, method, message
Simple example: the addition of a single validation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate.js Expand the validation </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action="" method="get" id="tinyphp">
<input type="text" value="" name="isZipCode" />
<input type="submit" value=" submit " />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
//Add validation rules
rules: {
isZipCode: { //Validation email
isZipCode: true
}
}
});
</script>
</body>
</html>
Validate. Expand. Js
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, " Please fill in your zip code correctly ");
Add multiple validation methods
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate.js Expand the validation </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action="" method="get" id="tinyphp">
Zip code: <input type="text" value="" name="isZipCode" /><br /><br />
Name: <input type="text" value="" name="userName" />
<input type="submit" value=" submit " />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
//Add validation rules
rules: {
isZipCode: { //Validation email
isZipCode: true
},
userName:{
required: true,
userName: true,
rangelength: [5,10]
}
},
//Resets the prompt message to be omitted
messages:{
userName: {
required: " Please fill in the user name ",
rangelength: " The user name must be in 5-10 Between characters "
}
}
});
</script>
</body>
</html>
Validate. Expand. Js
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, " The user name must be in 5-10 Between characters ");
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, " Please fill in your zip code correctly ");