Jquery. Validate

Mainly divided into several parts
Jquery. Validate basic usage
Jquery. Validate API description
Jquery. Validate custom
Validation of common jquery. Validate types 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/

The following are the default verification rules. You can also customize the rules.

(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. 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 .",
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) <input id = "email" class = "required email" value = "email @"/> 2:
You can customize verification rules in the control, for example:
Custom (required, [3, 5])
<Input id = "complex" value = "hi" class = "{required: True, minlength: 3, maxlength: 5,
Messages: {required: 'Why don't you enter a text? ', minlength: 'too few inputs', maxlength: 'What are so many inputs '} "/>

3: using JavaScript custom verification rules, the following JavaScript custom two rules, password and confirm_password
copy Code the code is as follows: $ (). ready (function () {
$ ("# form2 "). validate ({
rules :{< br> password :{< br> required: True,
minlength: 5
},
confirm_password: {
required: True,
minlength: 5,
failed to: "# password"
}< BR >},
messages: {
password: {
required: "No password entered",
minlength: jquery. format ("the password cannot be less than {0} characters")
},
confirm_password :{< br> required: "No confirmation password",
minlength: "confirm that the password cannot be less than {0} characters",
similar to: "The two passwords are inconsistent."
}< BR> });
});

In addition to true/false, required can also use expressions or functions, suchCopy codeThe Code is as follows: $ ("# form2"). Validate ({
Rules :{
Funcvalidate :{
Required: function () {return $ ("# password"). Val ()! = "";}
}
},
Messages :{
Funcvalidate :{
Required: "required if a password is available"
}
}
});

Html
Password <input id = "password" name = "password" type = "password"/>
Confirm Password <input id = "confirm_password" name = "confirm_password" type = "password"/>
Condition Verification <input id = "funcvalidate" name = "funcvalidate" value = ""/>

4: Use Meta to customize verification information

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

Html

Email <input class = "{validate: {required: True, email: True,
Messages: {required: 'enter email address', email: 'invalid email address'} "/>

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
<Input id = "email" name = "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.

ExampleCopy codeThe Code is as follows: // 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 of radio, checkbox, and select are similar.

Radio Verification

Gender
<Span>
Male <input type = "radio" id = "gender_male" value = "M" name = "gender" class = "{required: true}"/> <br/>
Female <input type = "radio" id = "gender_female" value = "F" name = "gender"/>
</Span>

Checkbox Verification

Select at least two items
<Span>
Option 1 <input type = "checkbox" id = "check_1" value = "1" name = "checkgroup"
Class = "{required: True, minlength: 2, messages: {required: 'must be selected, minlength:' select at least two items '}"/> <br/>
Option 2 <input type = "checkbox" id = "check_2" value = "2" name = "checkgroup"/> <br/>
Option 3 <input type = "checkbox" id = "check_3" value = "3" name = "checkgroup"/> <br/>
</Span>

Select Verification

Drop-down list
<Span>
<Select id = "selectbox" name = "selectbox" class = "{required: true}">
<Option value = ""> </option>
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
</SELECT>
</Span>
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
Http://www.jb51.net/article/24079.htm

The next chapter describes the API
Then I sorted out how to further customize jquery. Validate and some common verification code on the Internet.