Jquery.validate Authentication Library

Jquery.validate Authentication Library

First, use before the necessary
Official website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Api:http://jquery.bassistance.de/api-browser/plugins.html
Current version: 1.5.5
jquery version required: 1.2.6+, compatible 1.3.2
<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>

Two, default checksum rule
(1) required:true required field
(2) Remote: "check.php" use Ajax method to invoke check.php validation input value
(3) email:true You must enter the correct format for e-mail
(4) Url:true must enter the correct format of the URL
(5) Date:true must enter the correct format of the date
(6) Dateiso:true must enter the correct format of the date (ISO), For example: 2009-06-23, 1998/01/22 only validate the format, do not validate the validity
(7) Number:true must enter a valid number (negative, decimal)
(8) Digits:true must enter an integer
(9) CreditCard: You must enter a valid credit card number
(a) Equalto: "#field" input value must be the same as #field
Accept: Enter a string with the legal suffix name (the suffix of the uploaded file)
(12) Maxlength:5 Enter a string of up to 5 (Chinese characters)
(minlength:10) The string with a minimum input length of 10 (Kanji)
() rangelength:[5,10] The input length must be between 5 and 10 string ") (Chinese character)
(range:[5,10)] The input value must be between 5 and 10
Max:5 input value cannot be greater than 5
(m) min:10 input value cannot be less than ten

Third, the default hint JS code messages: {required: "This field is required.", Remote: "To fix this field.", Email: "Please enter a Val ID email address. ', url: ' Please enter a valid URL. ', Date: ' Please enter a valid date. ', Dateiso: "Please enter a valid D Ate (ISO). ", Datede:" Bitte geben Sie ein G eyebrow ltiges Datum. ", Number:" Please enter a ein number. ", valid:" Numberde g Eben Sie eine Nummer ein. ", Digits:" Please enter only digits ", CreditCard:" Please enter a valid credit card number. "And EQ Ualto: "Please enter the same value again.", Accept: "To enter a value with a valid extension.", MaxLength: $.validato R.format ("Please enter no further 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.form At (' 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}.")},

If you need to modify, you can add in the JS code: JS Code jquery.extend (jQuery.validator.messages, {required: "Required fields", Remote: "Please fix this field", Email: " Please enter the email in the correct format. URL: "Please enter a valid URL", Date: "Please enter a valid date", Dateiso: "Please enter a valid date (ISO).", Number: "Please enter the valid numbers", digits: "Can only enter an integer", credit Card: "Please enter a legal credit number", Equalto: "Please enter the same value again", Accept: "Please enter a string with a legal suffix name", Maxlength:jQuery.validator.format ("Please enter a length of up to {0} Minlength:jQuery.validator.format ("Enter a string with a length of at least {0}"), Rangelength:jQuery.validator.format ("Please enter a length of {0 and {1}, Range:jQuery.validator.format ("Enter a value between {0} and {1}"), Max:jQuery.validator.format ("Enter a value of up to {0}") , Min:jQuery.validator.format (Please enter a value of min {0})});

Recommended practice, this file into the messages_cn.js, in the page to introduce JS code <script src= ". /js/messages_cn.js "type=" Text/javascript "></script>

Iv. Mode of Use
1. Officers transferred Guevara rules written to control the JS code <script src= ". /js/jquery.js "type=" Text/javascript "></script> <script src=". /js/jquery.validate.js "type=" Text/javascript "></script> <script src="./js/jquery.metadata.js "Type=" Text/javascript "></script> $ (). Ready (function () {$ (" #signupForm "). Validate (); <form id= "Signupform" method= "Get" action= "" > <p> <label for= "FirstName" >Firstname</label> <input id= "FirstName" name= "FirstName" class= "required"/> </p> <p> <label for= "email" >e-mail </label> <input id= "email" name= "email" class= "required email"/> </p> <p> <label for= " Password ">Password</label> <input id=" password "name=" password "type=" password "class=" {required:true, Minlength:5} "/> </p> <p> <label for=" Confirm_password "> Confirm password </label> <input id=" confirm _password "Name=" Confirm_password "type=" password "class=" {required:true,minlength:5,equalto: ' #password '} ' /> </p> <p> <input class= "Submit" type= "submit" value= "Submit"/> </p> </form> use class= "{}" method, the package must be introduced: Jquery.metadata.js

You can use the following methods to modify the hint: JS code class= "{required:true,minlength:5,messages:{required: ' Please enter the content '}" when using the Equalto keyword, the following must be enclosed in quotation marks , the following code: JS code class= "{required:true,minlength:5,equalto: ' #password '}" another way, using keywords: meta (for metadata use other plug-ins you want to wrap your validation rules This particular option can be used in their own projects.

Tell the validation plugin to look inside a validate-property into metadata for validation rules.
For example: JS code meta: "Validate" <input id= "password name=" password "type=" password "class=" {validate:{required:true, Minlength:5}} "/> Another way: JS code $.metadata.settype (" attr "," validate "); This can be done using validate= "{required:true}", or class= "required", but class= "{required:true,minlength:5}" will not work

2. Officers transferred Guevara rules are written in the code
HTML code $ (). Ready (function () {$ ("#signupForm"). Validate ({rules: {firstname: "required", email: {required:true, email: true}, Password: {required:true, minlength:5}, Confirm_password: {required:true, Minlength:5, Equalto: "#password }, messages: {firstname: "Please enter your name", email: {Required: "Please enter your email address", Email: "Please enter the correct email address"}, Password: {required: "please Enter Password ", Minlength:jQuery.format (" Password cannot be less than {0} characters ")}, Confirm_password: {required:" Please enter confirmation password ", minlength:" Confirm password cannot be less than 5 characters ", Equalto: "Two input passwords inconsistent inconsistent"}}); }); Messages, if a control does not have a message, the default information is invoked <form id= "Signupform" method= "Get" action= "> <p> <label for=" FirstName ">Firstname</label> <input id=" FirstName "name=" FirstName "/> </p> <p> <label for= "Email" >E-Mail</label> <input id= "email" name= "email"/> </p> <p> <label for= " Password ">Password</label> <input id=" password "name=" password "type=" password "/> </p> <p > <label for= "CoNfirm_password "> Confirm password </label> <input id=" Confirm_password "name=" Confirm_password "type=" password "/> </p> <p> <input class= "Submit" type= "submit" value= "Submit"/> </p> </form>

Required:true must have a value
Required: The value of the "#aa: Checked" expression is true, you need to verify
Required:function () {} returns True, the table requires validation
Two of the elements that are commonly used in the form that need to be filled in or not filled in at the same time

V. Common methods and attention problems
1. Replace the default submit JS code in other ways $ (). Ready (function () {$ ("#signupForm"). Validate ({submithandler:function (form) {alert (" Submitted "); Form.submit (); } }); });

You can set the default value of validate, as follows: JS code $.validator.setdefaults ({submithandler:function (form) {alert ("submitted!"); Form.submit (); } });

If you want to submit a form, you need to use Form.submit () instead of $ (form). Submit ()

2.debug, if this parameter is true, then the form will not submit, only check, debugging is very convenient JS code $ (). Ready (function () {$ ("#signupForm"). Validate ({debug:true});

If there is more than one form in a page, use JS code $.validator.setdefaults ({debug:true})

3.ignore: Ignoring some elements does not verify the JS code ignore: ". Ignore"

4.errorplacement:callback Default: Put the error message behind the validated element
Indicates where the error was placed, by default: Error.appendto (Element.parent ()), where the error message is placed behind the validated element
Errorplacement:function (Error, Element) {
Error.appendto (Element.parent ());
}
Example: HTML code <tr> <td class= "label" ><label id= "Lfirstname" for= "FirstName" >first </td> <td class= "field" ><input id= "FirstName" name= "FirstName" type= "text" value= "" maxlength= "100" ></td> <td class= "status" ></td> </tr> <tr> <td style= "padding-right:5px;" > <input id= "dateformat_eu" name= "DateFormat" type= "Radio" value= "0"/> <label id= "Ldateformat_eu" for= " Dateformat_eu ">14/02/07</label> </td> <td style=" padding-left:5px; > <input id= "dateformat_am" name= "DateFormat" type= "Radio" value= "1"/> <label id= "ldateformat_am" for= " Dateformat_am ">02/14/07</label> </td> <td></td> </tr> <tr> <td class=" Label ">&nbsp;</td> <td class=" field "colspan=" 2 "> <div id=" termswrap "> <input id=" Terms " type= "checkbox" name= "terms"/> <label id= "lterms" for= "terms" >i have read and accept the terms of Use.&