Jquery built in validation of validate method example of of form validation

  • 2020-03-30 00:45:00
  • OfStack

(1)required:true field
(2)remote:"check.php" USES the ajax method to call check.php to verify the input value
(3)email:true must enter the correct email format
(4)url:true must enter the correct format of the url
(5)date:true must be entered in the correct format
(6)dateISO:true must enter the correct format of the date (ISO), e.g., 2009-06-23, 1998/01/22, only format, not validity
You must enter a valid number (negative number, decimal number).
(8)digits:true must be entered as an integer
(9)creditcard: a valid creditcard number must be entered
(10)equalTo:"#field" input value must be the same as #field
(11)accept: enter a string with a legal suffix (suffix of the uploaded file)
Enter a string with a maximum length of 5 (Chinese characters count as one character)
Input a string with a minimum length of 10 (Chinese characters count as one character)
(14)rangelength:[5,10] input length must be between 5 and 10 string ")(Chinese characters count as a character)
The input value must be between 5 and 10
The input value of Max :5 cannot be greater than 5
Min :10 input value should not be less than 10

Examples of the Demo:


<!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 Use of built-in validation rules </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>
</head>
<body>
<form action=""  method="get" id="tinyphp">
<input type="text" value="" name="userName" />
<input type="submit" value=" submit " />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
    //Add validation rules
    rules: {
        userName:{
            required: true,
            digits:true,
            userName: true,
            rangelength: [5,10]    
        }
    },

    //Reset the prompt message
    messages:{
        userName: {
            required: " Please fill in the user name ",
            digits:" Please enter an integer ",
            rangelength: " The user name must be in 5-10 Between characters " 
        }       

    }
});  
    </script>
</body>
</html>


Related articles: