jquery.validate usage guide Part 1_jquery

Mainly divided into several parts
Basic usage of jquery.validate
jquery.validate API description
jquery.validate Customization
jquery.validate common types of verification codes

Download address

Document address of jquery.validate plug-in
http://docs.jquery.com/Plugins/Validation

Home page of jquery.validate plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Demo provided on the jquery.validate plugin home page
http://jquery.bassistance.de/validate /demo/

Verification rules The following are the default verification rules, you can also customize the rules

(1)required:true required fields
(2) remote:"check.php" Use the ajax method to call check.php to verify the input value
(3)email:true You must enter the email in the correct format
(4)url:true You must enter the URL in the correct format
(5)date:true You must enter the date in the correct format
(6)dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only verify the format, not Verify validity
(7)number:true You must enter a legal number (negative number, decimal)
(8)digits:true You must enter an integer
(9)creditcard: You must enter a legal credit card number
(10)equalTo:"#field" The input value must be the same as #field
(11)accept: Enter a string with a legal suffix (the suffix of the uploaded file)
(12)maxlength:5 input length A string of at most 5 (Chinese characters count as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters count as one character)
(14)rangelength:[5,10] Enter the length A string that must be between 5 and 10") (Chinese characters count as one character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max: 5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10

Verification prompt

The following is the default verification prompt, the official website has simplified version Download the Chinese version of the verification prompt, or customize the error prompt message through jQuery.extend(jQuery.validator.messages) to unify the website's verification prompt text into one file.

Copy code The code is as follows:

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $ .validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}." ),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

Usage

1:
Use default validation rules in the control, example:
Email (Required) 2:
You can customize the validation rules in the control, example:
Customized (required) Fill in, [3,5])


3: Customize validation rules through javascript, The following JS customizes two rules, password and confirm_password

Copy code The code is as follows:

$().ready(function() {
$("#form2").validate({
rules: {
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages : {
password: {
required: "No password filled in",
minlength: jQuery.format("Password cannot be less than {0} characters")
},
confirm_password: {
required: "No password confirmation",
minlength: "The confirmation password cannot be less than {0} characters",
equalTo: "The password entered twice is inconsistent"
}
}
});
});

required In addition to being set to true/false, you can also use expressions or functions, such as

Copy code The code is as follows:

$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val() !=""; }
}
},
messages: {
funcvalidate: {
required: "Required if there is a password"
}
}
});

Html
Password
Confirm password
Conditional verification

4: Use meta to customize verification information

First set meta with JS
$("#form3").validate({ meta: "validate" });

Html

email

5: Use meta to write validation rules in custom tags, such as validate

JS set meta
$().ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
});

Html

Email
validate="{required:true, email:true, messages:{required:' Enter email address', email:'You entered is not a valid email address'}}" />

6: Custom validation rules

For complex For verification, you can add custom verification rules through jQuery.validator.addMethod

The additional-methods.js provided by the official website contains some commonly used verification methods, such as lettersonly, ziprange, nowhitespace, etc.

Example

Copy code The code is as follows:

// Character validation
jQuery.validator. addMethod("userName", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w] $/.test(value);
}, "Username can only Including Chinese characters, English letters, numbers and underscores");

//Then you can use this rule
$("#form1").validate({
// Validation rule
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/* settings Error message*/
messages: {
userName: {
required: "Please fill in the username",
rangelength: "The username must be between 5-10 characters"
}
},
});

7: The verification methods of radio, checkbox and select are similar to

radio verification

Gender

Male< ;br />
Female


checkbox Verification

Select at least two items

Option 1class ="{required:true,minlength:2, messages:{required:'must select',minlength:'at least 2 items must be selected'}}" />

Option 2

Option 3



select validation

drop-down box

< select id="selectbox" name="selectbox" class="{required:true}">

1
2
3

8: Ajax verification

Ajax verification can be performed using remote
remote: {
url: "url", / /url address
type: "post", //Sending method
dataType: "json", //Data format data: { //Data to be transferred
username: function() {
return $("#username").val();
}}
}

Supplement: Bug in the remote verification method of the jQuery Validation plug-in
http://www. jb51.net/article/24079.htm

The next chapter is a detailed description of the API
and then organizes how to further customize jQuery.validate and some commonly used verification codes on the Internet