jquery Plugin---Validator Plugin

Web page Form Fill in--login, registration and other operations

Client-side validation: A modern web site when filling out forms, almost always takes the form

Advantages: 1 • Reduce server pressure, 2 • Shorten user latency and enhance user experience

How to select Plug-ins

Website address: http://bassistance.de/jquery-plugins/jquery-plugin-validation

JQuery plugin:validation Usage Instructions

Reproduced from: http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html

One Import JS Library
<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>

Second, the default checksum rule
(1) Required:true must be lost field
(2) Remote: "check.php" use Ajax method to invoke check.php validate input value
(3) Email:true must enter the correct format email
(4) Url:true must enter the URL in the correct format
(5) Date:true must enter the correct format of the date and date check IE6 error, use caution
(6) Dateiso:true must enter the correct format of 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, decimal)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter the legal credit card number
(a) Equalto: "#field" input value must be the same as #field
(one) Accept: Enter a string with a valid suffix name (the suffix of the uploaded file)
(Maxlength:5) A string with a maximum of 5 input length (Chinese characters are counted as one character)
(Minlength:10) A string with a minimum input length of 10 (Chinese characters are counted as one character)
(rangelength:[5,10] Enter a string that must be between 5 and 10) (Chinese characters are counted as one character)
() range:[5,10] The 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

Third, the default hint
Messages: {
Required: "This field is required.",
Remote: "Please fix this field.",
Email: "Please enter a valid e-mail 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.",
Number: "Please enter a valid number.",
Numberde: "Bitte geben Sie eine Nummer.",
Digits: "Please enter only digits",
CreditCard: "Please enter a valid 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 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:

Jquery.extend (JQuery.validator.messages, {
Required: "Required fields",
Remote: "Please fix this field",
Email: "Please enter the correct format email",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter legal numbers",
Digits: "Only integers can be entered",
CreditCard: "Please enter a valid credit card 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 string with a maximum length of {0}"),
Minlength:jQuery.validator.format ("Please enter a string with a length of at least {0}"),
Rangelength:jQuery.validator.format ("Please enter a string between {0} and {1}"),
Range:jQuery.validator.format ("Please enter a value between {0} and {1}"),
Max:jQuery.validator.format ("Please enter a value of max {0}"),
Min:jQuery.validator.format ("Please enter a value of min {0}")
});

Recommended practice, put this file into Messages_cn.js, and introduce it into the page
<script src= ". /js/messages_cn.js "type=" Text/javascript "></script>

Iv. Mode of Use
1. Officers transferred Guevara rules written to 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" >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 >

The package must be introduced in the way class= ' {} ' is used: jquery.metadata.js

You can modify the hint by using the following methods:
Class= ' {required:true,minlength:5,messages:{required: ' Please enter the content '}} '

When using the Equalto keyword, the following text must be enclosed in quotation marks, as follows:
Class= "{required:true,minlength:5,equalto: ' #password '}"

2. Officers transferred Guevara rules written in the JS 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"