Jquery. Validate full strategy

Default verification 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 Default prompt

Messages :{
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 ).",
Datede: "bitte geben Sie ein g eyebrow ltiges datum ein .",
Number: "Please enter a valid number .",
Numberde: "bitte geben Sie eine nummer ein .",
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 }.")
}. To modify the parameter, add jquery. Extend (jquery. validator. Messages ,{
Required: "required fields ",
Remote: "Please correct this field ",
Email: "Please enter an email in the correct format ",
URL: "enter a valid URL ",
Date: "enter a valid date ",
Dateiso: "enter a valid date (ISO ).",
Number: "enter a valid number ",
Digits: "Only integers can be entered ",
Creditcard: "enter a valid credit card number ",
Similar to: "Please enter the same value again ",
Accept: "enter a string with a valid suffix ",
Maxlength: jquery. validator. Format ("enter a string with a maximum length of {0 "),
Minlength: jquery. validator. Format ("enter a string with at least {0} length "),
Rangelength: jquery. validator. Format ("enter a string between {0} and {1 "),
Range: jquery. validator. Format ("enter a value between {0} and {1 "),
MAX: jquery. validator. Format ("enter a maximum value of {0 "),
Min: jquery. validator. Format ("enter a minimum value of {0 ")
}); Recommended Practice: Put this file into messages_cn.js and introduce it on the page
<SCRIPT src = "../JS/messages_cn.js" type = "text/JavaScript"> </SCRIPT> Usage

1. Write the validation rule to the control.
<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 = "">

<Label for = "firstname"> firstname </label>
<Input id = "firstname" name = "firstname" class = "required"/>

<Label for = "email"> email </label>
<Input id = "email" name = "email" class = "required email"/>

<Label for = "password"> password </label>
<Input id = "password" name = "password" type = "password" class = "{required: True, minlength: 5}"/>

<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password" class = "{required: True, minlength: 5, failed to: '# password'}"/>

<Input class = "Submit" type = "Submit" value = "Submit"/>

</Form> to use class = "{}", you must introduce the package: jquery. Metadata. js. You can use the following method to modify the prompt content:
Class = "{required: True, minlength: 5, messages: {required: 'Enter the content'}" when using the sort to keyword, the following content must be enclosed by quotation marks, the following code:
Class = "{required: True, minlength: 5, failed to: '# password'}" another method, using the Keyword: meta (to use other plug-ins for metadata, You need to wrap your verification rules and use this special option in their own projects)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
For example:
Meta: "Validate"
<Input id = "password" name = "password" type = "password" class = "{validate: {required: True, minlength: 5} "/> another method:
$. Metadata. settype ("ATTR", "Validate"); in this way, you can use validate = "{required: true}", or class = "required", but class = "{required: true, minlength: 5} "will not work 2. write the validation rule to the Code $ (). ready (function (){
$ ("# Signupform"). Validate ({
Rules :{
Firstname: "required ",
Email :{
Required: True,
Email: True
},
Password :{
Required: True,
Minlength: 5
},
Confirm_password :{
Required: True,
Minlength: 5,
Failed to: "# password"
}
},
Messages :{
Firstname: "enter your name ",
Email :{
Required: "Enter the email address ",
Email: "enter the correct email address"
},
Password :{
Required: "enter the password ",
Minlength: jquery. Format ("the password cannot be less than {0} characters ")
},
Confirm_password :{
Required: "enter the password ",
Minlength: "The password cannot be less than five characters ",
Similar to: "inconsistent passwords entered twice"
}
}
});
}); // At messages, if a control does not have a message, the default information <Form ID = "signupform" method = "get" Action = "">

<Label for = "firstname"> firstname </label>
<Input id = "firstname" name = "firstname"/>

<Label for = "email"> email </label>
<Input id = "email" name = "email"/>

<Label for = "password"> password </label>
<Input id = "password" name = "password" type = "password"/>

<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password"/>

<Input class = "Submit" type = "Submit" value = "Submit"/>

</Form> required: True must have a value.
If the value of the required: "# Aa: checked" expression is true, you need to verify
Required: function () {} returns true, which must be verified during table verification.
The following two types of elements are commonly used: elements that need to be filled in or out of the formCommon methods and precautions

1. use other methods to replace the default submit $ (). Ready (function (){
$ ("# Signupform"). Validate ({
Submithandler: function (form ){
Alert ("submitted ");
Form. Submit ();
}
});
}); You can set the default value of validate as follows:
$. Validator. setdefaults ({
Submithandler: function (form) {alert ("submitted! "); Form. Submit ();}
}); To submit a form, use form. submit () instead of $ (form ). submit () 2. debug. If this parameter is set to true, the form is not submitted and only checked. This is very convenient for debugging.
$ (). Ready (function (){
$ ("# Signupform"). Validate ({
Debug: True
});
});
If a page contains multiple forms, use
$. Validator. setdefaults ({
Debug: True
}) 3. Ignore: Ignore some elements and do not verify
Ignore: ". Ignore" 4. errorplacement: callback default: Put the error message after the verification element
Specifies the location where the error is placed. The default situation is: Error. appendto (element. Parent (); that is, the error information is placed after the verification element.
Errorplacement: function (error, element ){
Error. appendto (element. Parent ());
} // Example:
<Tr>
<TD class = "label"> <label id = "lfirstname" for = "firstname"> first name </label> </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. </label>

</TD>
</Tr> errorplacement: function (error, element ){
If (element. Is (": Radio "))
Error. appendto (element. Parent (). Next (). Next ());
Else if (element. Is (": checkbox "))
Error. appendto (element. Next ());
Else
Error. appendto (element. Parent (). Next ());
} The purpose of the code is to display the error information in <TD class = "status"> </TD>, if radio is displayed in <TD> </TD>, if the checkbox is displayed behind the content, errorclass: String default: "error"
Specifies the CSS Class Name of the error message. You can customize the style errorelement: String default: "label" of the error message"
Label used to mark errors. The default label can be changed to emerrorcontainer: selector.
Display or hide the verification information. The Container attribute can be automatically displayed when an error message is displayed, and hidden when no error occurs, which is of little use.
Errorcontainer: "# messagebox1, # messagebox2" errorlabelcontainer: Selector
Put the error information in a container. Wrapper: String
Label used to pack the preceding errorelement. Generally, these three attributes are used at the same time to display all error prompts in a container. If there is no information, the errorcontainer is automatically hidden: "Div. error ",
Errorlabelcontainer: $ ("# signupform Div. error "),
Wrapper: "Li": Set the error message style. You can add the input. error {border: 1px solid red;} icon to display ;}
Label. error {
Background: URL (". /demo/images/unchecked.gif ") No-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: # ea5200;
}
Label. Checked {
Background: URL ("./demo/images/checked.gif") No-repeat 0px 0px;
} Success: String, callback
The action after the element to be verified passes the verification. If it is followed by a string, it will be treated as a CSS class or a function.
Success: function (Label ){
// Set & nbsp; as text for IE
Label.html ("& nbsp;"). addclass ("checked ");
// Label. addclass ("valid"). Text ("OK! ")
}
Add "valid" to the verification element and define the style <style> label. Valid {}</style> in CSS.
Success: "valid" nsubmit: Boolean default: True
Verification upon submission. use other methods to verify if the value is false.
Onfocusout: Boolean default: True
Missing focus is verification (excluding checkboxes/radio buttons)
Onkeyup: Boolean default: True
Verification during keyup.
Onclick: Boolean default: True
Verify when checkboxes and radio are clicked
Focusinvalid: Boolean default: True
After a form is submitted, a form that has not passed the verification (the first form or a form that has not passed the verification that has received the focus before submission) will get the focus
Focuscleanup: Boolean default: false
If this parameter is set to true, the error message is removed when the unverified element gets the focus. Avoid using the form with the focusinvalid // reset the form
$ (). Ready (function (){
VaR validator = $ ("# signupform"). Validate ({
Submithandler: function (form ){
Alert ("submitted ");
Form. Submit ();
}
});
$ ("# RESET"). Click (function (){
Validator. resetform ();
}) ;}); Remote: URL
Verify with Ajax, the current verified value is submitted to the remote address by default, if you need to submit other values, you can use the data option remote: "check-email.php" remote :{
URL: "check-email.php", // background Handler
Type: "Post", // data transmission method
Datatype: "JSON", // accept the data format
Data: {// data to be passed
Username: function (){
Return $ ("# username"). Val ();
}
}
} The remote address can only output "true" or "false", but cannot output addmethod: name, method, message
Custom verification method // two bytes of Text
Jquery. validator. addmethod ("byterangelength", function (value, element, Param ){
VaR length = value. length;
For (VAR I = 0; I <value. length; I ++ ){
If (value. charcodeat (I)> 127 ){
Length ++;
}
}
Return this. Optional (element) | (length> = Param [0] & length <= Param [1]);
}, $. Validator. format ("make sure that the input value is between {0}-{1} bytes (one text is counted as two bytes)"); // zip code verification
Jquery. validator. addmethod ("iszipcode", function (value, element ){
VaR Tel =/^ [0-9] {6} $ /;
Return this. Optional (element) | (Tel. Test (value ));
}, "Please enter your zip code correctly"); required of radio, checkbox, and select verification radio indicates that one
<Input type = "radio" id = "gender_male" value = "M" name = "gender" class = "{required: true}"/>
<Input type = "radio" id = "gender_female" value = "F" name = "gender"/> the required field of the checkbox indicates that the checkbox must be selected.
<Input type = "checkbox" class = "checkbox" id = "agree" name = "agree" class = "{required: true} "/> the minlength of the checkbox indicates the minimum number that must be selected, maxlength indicates the maximum number of selected items, and rangelength: [2, 3] indicates the selected number range.
<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "spam []" class = "{required: True, minlength: 2} "/>
<Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "phone" name = "spam []"/>
<Input type = "checkbox" class = "checkbox" id = "spam_mail" value = "mail" name = "spam []"/> select required indicates that the selected value cannot be null
<Select id = "Jungle" name = "Jungle" Title = "Please select something! "Class =" {required: true} ">
<Option value = ""> </option>
<Option value = "1"> Buga </option>
<Option value = "2"> Baga </option>
<Option value = "3"> oi </option>
</SELECT> select minlength indicates the minimum number of selected items (multiple select options are available). maxlength indicates the maximum number of selected items. rangelength: [2, 3] indicates the selected number range.
<Select id = "Fruit" name = "Fruit" Title = "Please select at least two fruits" class = "{required: True, minlength: 2} "multiple =" multiple ">
<Option value = "B"> banana </option>
<Option value = "A"> Apple </option>
<Option value = "p"> peach </option>
<Option value = "T"> turtle </option>
</SELECT>