jquery Plugin---Validator Plugin

Source: Internet
Author: User

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"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.