Home > Developer > Web Develop
One: first introduced in the page
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery.validate.js" ></script>
Two: Pure HTML code
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta charset= "Utf-8" >
<title> form Check </title>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery.validate.js" ></script>
<body>
<form id= "Test" >
<input name= "Nameput" type= "text" size= "/> <input" name= "Nameput" type= "text" size= "/>"
<input name= "Submit" type= "Submit" value= "Submission"/>
</form>
<script type= "Text/javascript" >
$ ("#test"). Validate ({
rules:{
"Nameput": {
Required:true,
Minlength:3,
Maxlength:10
}
},
messages:{
"Nameput": {
Required: "Cannot be empty",
Minlength:jQuery.format ("Length not less than {0}"),
Maxlength:jQuery.format ("length not greater than {0}")
}
}
})
</script>
</body>
Three: Precautions
At first, the call was unsuccessful. The final discovery problem is:
(1) The default is to play the role when clicking Submit.
(2) If you are missing $ (). Ready (function() {}), the checksum content must be written behind the form.
(3) The Debug method needs to be written separately or after the rules and messages, otherwise it will not work.
IV: Other
The following are the custom authentication methods:
$.validator.addmethod ("stringlength", function(value, Element,params) {
Default value: {trim:true,minlength:-1,maxlength:-1
params = $.extend ([True, -1,-1],params); For default parameter support
if (Params[0]) {//filter the leading and trailing spaces
Value=$.trim (value);
}
Value = Value.replace (/< (?:.) *?>/g, ""); Filter labels when validating
returnthis. Optional (element) | | ((params[1]<0 | | value.length>=params[1]) && (params[2]<0 | | value.length<=params[2]));
}, Jquery.format ("Length between {1}-{2}"));
For example, a login check in the home project:
$ (' #loginform '). Validate ({//Login check
rules:{
"Useraccount.username": {
"Requiredstring": ["true"],
"Requiredstring":true,
"Stringlength": ["true", "3", "40"]
},
"Useraccount.userpwd": {
"Requiredstring": ["true"],
"Stringlength": ["true", "1", "20"]
}
},
messages:{
"Useraccount.username": {
"Requiredstring": "User name required",
"Stringlength": Jquery.format ("user name length between {1} and {2}")
},
"Useraccount.userpwd": {
"requiredstring": "Password cannot be empty",
"Stringlength": Jquery.format ("password length between {1} and {2}")
}
}
})
Useraccount.username is the name,requiredstring, requiredstring, and stringlength of the page's corresponding input, defined in/IMAGE/HI/COMMON/JS In the/zxwvalidate.js.
{1}, {2}, etc. are the first elements of the rules that correspond to the validation method, starting with 0.
A simple example:
$.validator.addmethod ("TWD", function(value, element,params) {//Default value: {trim:true,minlength:-1,maxlength:-1
params = $.extend ([True, -1,-1],params); For default parameter support
if (Params[0]) {
Value=$.trim (value);
}
})
$ ("#test"). Validate ({
rules:{
"Nameput": {
"TWD": [True, 3,10]
}
},
messages:{
"Nameput": {
"TWD": Jquery.format ("Length between {1} and {2}")
}
}
})
Report:
Jquery.validate provides us with 3 ways to write verification, each with its advantages and disadvantages:
(1) Write the class style in the input object to specify a validation rule or property validation rule:
such as <input type= "text" class= "required"/>
The simplest and most convenient, prompt message uses Jquery.validate's built-in message (custom extended validation rules also belong to this item), but because it is validated as a style name, subsequent modifications must find the appropriate input object and cannot use advanced validation rules.
(2) Write the class style in the input object, except that it is written in JSON format, but this way provides support for custom validation messages:
such as <input type= "text" class= "{required:true,minlength:5,,messages:{required: ' Please enter content '}"/>
Simple, convenient, but personally think a bit bloated, or the same as the 1th and the corresponding input object entangled together, and also added message customization, so that the input object becomes larger, interfering with the page code reading, But you can use advanced validation rules (in fact, the 3rd kind of JS in JSON format into the specific class.
(3) using the Pure JS method:
Such as:
$ (). Ready (function () {
$ ("#aspnetform"). Validate ({
Rules: {
Name: "Required",
Email: {
Required:true,
Email:true
}
})
})
Use of jquery form validation jquery.validate.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
