Jquery. validate plug-in (-)

Jquery. validate has been in use for several years without writing JavaScript, and the data is organized slowly. The format is also a bit messy, mainly divided into several parts of jquery. the basic usage of validate is jquery. validateAPI description jquery. validate custom jquery. download the verification code of the validate common type... syn

Introduction to jquery. validate

I haven't written JavaScript for several years, and the data is slowly organized and the format is also messy.

Mainly divided into several parts
Jquery. validate basic usage
Jquery. validate API description
Jquery. validate custom
Jquery. validate common Verification Code

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

Jquery. validate plug-in Home Page
Http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Demo provided on the jquery. validate plug-in Homepage
Http://jquery.bassistance.de/validate/demo/

Verification rules
The following are the default verification rules and can also be customized.

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

Verification prompt

The following is the default verification prompt. The official website provides a Simplified Chinese version Verification prompt for downloading, or you can use jQuery. extend (jQuery. validator. messages custom error message. You can unify the verification text of a website into a single file.

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 .",
Failed to: "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 the default verification rules in the control, for example:
Email (required)

2:
You can customize verification rules in the control, for example:
Custom (required, [3, 5])

3:

Using javascript custom verification rules, the following javascript custom two rules, password and confirm_password
$ (). Ready (function (){
$ ("# Form2"). validate ({
Rules :{
Password :{
Required: true,
Minlength: 5
},
Confirm_password :{
Required: true,
Minlength: 5,
Failed to: "# password"
}
},
Messages :{
Password :{
Required: "No password entered ",
Minlength: jQuery. format ("the password cannot be less than {0} characters ")
},
Confirm_password :{
Required: "No Password confirmed ",
Minlength: "The password cannot be less than {0} characters ",
Failed to: "The two passwords are inconsistent"
}
}
});
});

In addition to true/false, required can also use expressions or functions, such
$ ("# Form2"). validate ({
Rules :{
Funcvalidate :{
Required: function () {return $ ("# password"). val ()! = "";}
}
},
Messages :{
Funcvalidate :{
Required: "required if a password is available"
}
}
});
 
Html
Password
Confirm Password
Condition Verification

4:

Use meta to customize verification information

Set meta with JS first
$ ("# Form3"). validate ({meta: "validate "});

Html

Email

5:

You can use meta to write verification rules in custom tags, such as validate.

Set meta in JS
$ (). Ready (function (){
$. Metadata. setType ("attr", "validate ");
$ ("# Form1"). validate ();
});

Html

Email
Validate = "{required: true, email: true, messages: {required: 'input email address', email: 'invalid email address you entered '}"/>

6:
Custom verification rules

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

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

Example
// Character Verification
JQuery. validator. addMethod ("userName", function (value, element ){
Return this. optional (element) |/^ [\ u0391-\ uFFE5 \ w] + $/. test (value );
}, "The user name can only contain Chinese characters, English letters, numbers, and underscores ");

// Then you can use this rule.
$ ("# Form1"). validate ({
// Verification rules
Rules :{
UserName :{
Required: true,
UserName: true,
Rangelength: [5, 10]
}
},
/* Set the error message */
Messages :{
UserName :{
Required: "Enter the user name ",
Rangelength: "The user name must be 5-10 characters long"
}
},
});

7:
The verification methods for radio, checkbox, and select are similar.

Radio Verification

Gender

Male

Female


Checkbox Verification

Select at least two items

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

Option 2

Option 3

Select Verification

Drop-down list

123

8:

Ajax Verification

Remote can be used for Ajax Verification
Remote :{
Url: "url", // url address
Type: "post", // sending Method
DataType: "json", // data format data: {// The data to be transmitted
Username: function (){
Return $ ("# username"). val ();
}}
}

Added: Bug in jQuery Validation plug-in remote verification method

 

 

From crazygirl