Jquery. validate

Source: Internet
Author: User
Tags valid email address

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

Jquery. validate plug-in Home Page

Demo provided on the jquery. validate plug-in Homepage

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 codeThe 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 }.")


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 codeThe Code is as follows:
$ (). 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
Copy codeThe Code is as follows:
$ ("# Form2"). validate ({
Rules :{
Funcvalidate :{
Required: function () {return $ ("# password"). val ()! = "";}
Messages :{
Funcvalidate :{
Required: "required if a password is available"

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 "});


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 ();


<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.

Copy 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

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"/>

Checkbox Verification

Select at least two items
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/>

Select Verification

Drop-down list
<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>
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

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.