Jquery.validate Manual (1)

mainly divided into several parts
Jquery.validate Basic Usage
Jquery.validate API Description
Jquery.validate Custom
Jquery.validate Common types of validation code



Jquery.validate Plugin's document address
Http://docs.jquery.com/Plugins/Validation

Jquery.validate Plugin's homepage
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

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

the following validation rules are the default check rules, or you can customize the rules

(1) Required:true must lose field
(2) Remote: "check.php" using Ajax method call check.php Validate input value
(3) Email:true must enter the correct format of e-mail
(4) Url:true must enter the correct format of the URL
(5) Date:true must enter the correct format date
(6) Dateiso:true must enter the correct format for the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, do not verify the validity
(7) Number:true must enter a valid number (negative, fractional)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter a valid credit card number
Equalto: The "#field" input value must be the same as #field
(one) Accept: Enter a string with a valid suffix (the suffix of the uploaded file)
Maxlength:5 input string with a maximum length of 5 (Chinese characters are counted as one character)
(minlength:10) Enter a string with a minimum length of 10 (Chinese characters are counted as one character)
(rangelength:[5,10] Enter a string that must be between 5 and 10 in length) (Chinese characters are counted as one character)
(range:[5,10] Input value must be between 5 and 10
(+) Max:5 input value cannot be greater than 5
(min:10) input value cannot be less than 10

Validation Tips

The following is the default validation prompt, the official website has Simplified Chinese version of the verification prompts to download, or through the Jquery.extend (jQuery.validator.messages custom error message, you can unify the site's validation hint text into a 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.", 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 of less than or equal to {0}."), min: $.validator.format ("Please enter a value of greater than or equal to {0}.")

How to use

1:
Use the default validation rule in the control, example:
e-mail (required) <input id= "email" class= "required Email" value= "[email protected]"/>2:
You can customize validation rules in a control, for example:
Custom (required, [3,5])
<input id= "complex" value= "HI" class= "{required:true,minlength:3, Maxlength:5,
Messages:{required: ' Why not enter a little text ', minlength: ' Too little input ', maxlength: ' Enter so much to do '} '/>

3: Through JavaScript Custom validation rules, the following JS custom two rules, password and Confirm_password

  $ (). Ready ( function   () {$ ( "#form2"  true   5}, Confirm_password: {Required:  true   5" #password " Span style= "color: #000000;" >}}, messages: {password: {required:  "No password was entered"  "Password cannot be less than {0} characters" " No confirmation password ", MinLength:  "Confirm password cannot be less than {0} characters" " two times input password is inconsistent " } } }); }); 

Required in addition to True/false, you can also use expressions or functions, such as

$ ("#form2"function() {return $ ("#password"). val ()! = "" "must be filled in case of a password"

Html
Password <input id= "password" name= "password" type= "password"/>
Confirm Password <input id= "Confirm_password" name= "Confirm_password" type= "password"/>
Conditional validation <input id= "Funcvalidate" name= "funcvalidate" value= "/>

4: Use meta-custom validation information first set meta $ ("#form3") with JS. Validate ({meta: "Validate" }); Html email<input class= "{validate:{required:true, email:true, messages:{required: ' Enter email address ', email: ' You are not entering a valid email address ' }}}

5: Use Meta to write validation rules within a custom tag, such as Validate

JS Settings meta
$ (). Ready (function () {
$.metadata.settype ("attr", "validate");
$ ("#form1"). Validate ();
});

Html

Email
<input id= "Email" name= "email"
Validate= "{required:true, Email:true, messages:{required: ' Enter email address ', email: ' You entered not a valid email address '}} '/>

6: Custom validation rules

For complex validation, you can add custom validation rules through JQuery.validator.addMethod

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

Example

//Character VerificationJQuery.validator.addMethod ("UserName",function(value, Element) {return  This. Optional (Element) | | /^[\u0391-\uffe5\w]+$/. Test (value);},"User name can only include Chinese characters, English letters, numbers, and underscores"); //and then you can use this rule.$ ("#form1"). Validate ({//validation rulesrules: {userName: {required:true, UserName:true, rangelength: [5,10] } }, /*setting error Messages*/messages: {userName: {required:"Please fill in the user name", Rangelength:"User name must be between 5-10 characters" } }, }); 

7:radio, checkbox, select are verified in a similar way

Validation of Radio

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>

Validation of a CheckBox

Choose 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 2 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>

Validation of Select

drop-down box
<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

Using remote to authenticate Ajax
Remote: {
URL: "url",//url address
Type: "POST",//Send method
DataType: "JSON",//Data format: {//data to be passed
Username:function () {
Return $ ("#username"). Val ();
}}
}