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 ");
 


Related articles: