Use of jquery validate plug-in

I. And Demo
Http://jquery.bassistance.de/validate/jquery.validate.zip
Home: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Ii. 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

3. 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 parameters, add the following to the js Code:
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 ")
});
We recommend that you add this file to messages_cn.js and introduce it on the page.
<Script src = "../js/messages_cn.js" type = "text/javascript"> </script>

Iv. 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 = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname" class = "required"/>
</P>
<P>
<Label for = "email"> email </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, failed to: '# password'}"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</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 in quotation marks, as shown in the following code:
Class = "{required: true, minlength: 5, failed to: '# password '}"
Another way is to use keywords: meta (for metadata to use other plug-ins, You need to wrap your verification rules to 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}"/>

There is another way:
$. Metadata. setType ("attr", "validate ");
In this way, validate = "{required: true}" or class = "required" can be used, but class = "{required: true, minlength: 5}" will not work.

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page