Use jquery. validate, jqueryvalidate

Use jquery. validate, jqueryvalidate

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. You can also customize the rules (1) required: true mandatory field (2) remote: "check. php "uses ajax to call check. php verification input value (3) email: true must enter the correct format of the email (4) url: true must enter the correct format of the url (5) date: true: date in the correct format (6) dateISO: true: date in the correct format (ISO) must be entered. For example: 2009-06-23,1998/01/22: only the format is verified, not verified validity (7) number: true a valid number (negative, decimal) (8) digits: true must be an integer (9) creditcard: you must enter a valid credit card number (10) similar to: "# field". The value must be the same as that of # field. (11) accept: enter a string with a valid suffix (the suffix of the uploaded file) (12) maxlength: 5 string with a maximum input length of 5 (one character for Chinese 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 ") (one character for Chinese characters) (15) range: [5, 10] The input value must be between 5 and 10 (16) max: 5. The input value cannot be greater than 5 (17) min: 10. The input value cannot be less than 10.Verification promptThe 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 }. ")Usage1: use the default verification rules in the control. 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 not input a text? ', minlength: 'too few inputs', maxlength: 'input so much thing'} "/> 3: use javascript to customize 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, equa LTo: "# 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: "inconsistent passwords entered twice" }}});}); in addition to true/false, required can also use expressions or functions, for example, $ ("# form2 "). validate ({rules: {funcvalidate: {required: function () {return $ ("# password "). val ()! = "" ;}}, Messages: {funcvalidate: {required: "required if a password exists "}}}); html password <input id = "password" name = "password" type = "password"/> confirm the password <input id = "confirm_password" name = "confirm_password" type = "password" /> Condition Verification <input id = "funcvalidate" name = "funcvalidate" value = ""/> 4: use meta custom authentication information to set meta $ ("# form3") with JS first "). validate ({meta: "validate"}); Htmlemail <input class = "{validate: {required: true, email: true, messages: {required: 'input email address ', email: 'invalid email address you entered '}}} "/> 5: You can use meta to write verification rules in custom tags, for example, set meta $ () in validateJS (). ready (function () {$. metadata. setType ("attr", "validate"); $ ("# form1 "). validate () ;}); HtmlEmail <input id = "email" name = "email" validate = "{required: true, email: true, messages: {required: 'Enter email address', email: 'invalid email address'} "/> 6: Custom verification rules for complex verification, you can use jQuery. validator. addMethod add custom verification rules official website provides additional-methods.js contains some common verification methods such as lettersonly, ziprange, nowhitespace examples // 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 ");

Verify email format:

JQuery. validator. addMethod ("email", function (value, element) {return this. optional (element) |/^ [a-z0-9] + ([. _ \-] * [a-z0-9]) * @ ([a-z0-9] + [-a-z0-9] * [a-z0-9] + .) {} [a-z0-9] + $ /. test (value) ;}, "enter the correct email address ");

 

// Then you can use this rule $ ("# form1 "). validate ({// verification rule rules: {userName: {required: true, userName: true, rangelength: [5, 10]},/* set error message */messages: {userName: {required: "Enter the user name", rangelength: "The user name must be between 5-10 characters" }},}); 7: the radio, checkbox, and select verification methods are similar to radio validation gender <span> male <input type = "radio" id = "gender_male" value = "m" name = "gender" class = "{required: true} "/> <br/> for <input type =" radio "id =" gender_female "value =" f "name =" gender "/> </span> checkbox select at least two <span> Option 1 <input type = "checkbox" id = "check_1" value = "1" name = "checkGroup" class = "{required: true, minlength: 2, messages: {required: 'required? ', 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 <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", // transmission method dataType: "json ", // data format: {// username: function () {return $ ("# username") of the data to be passed "). val () ;}}supplement: Bug in the remote verification method of jQuery Validation plug-in http://www.cnblogs.com/JeffreyZhao/archive/2009/12/04/jquery-validate-remote-bug.html