Jquery. validate

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/

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

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

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.

Example
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

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.