Jquery.validate.js Form Validation

Source: Internet
Author: User
Tags valid email address

Jquery.validate.js Form Validation

First, the use of pre-requisite
Official website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Api:http://jquery.bassistance.de/api-browser/plugins.html

Official Document: Http://docs.jquery.com/Plugins/Validation/Methods

Second, the introduction of JS file

<script src= ". /.. /scripts/jquery-1.4.1.min.js "type=" Text/javascript "></script>
<script src= ". /.. /scripts/jquery.validate.min.js "type=" Text/javascript "></script>

Third, write validation js

$ (function () { $ (document.forms[0]). Validate ({ rules: { UserName: {required:true, Minlength:6, maxlength:12}, Password: {required:true, Minlength:5, maxlength:12}         }, messages: { "UserName": { Required: "User name cannot be empty.", minlength: "Minimum 6-bit", maxlength: "Up to 12 bits"             }, "Password": { Required: "The password cannot be empty."             }         }     }); })


Second, the default check rule
(1)Required: True must lose field
(2)Remote: "check.php" validates the input value using the Ajax method call check.php (detailed below)
(3)Email: True must enter e-mail in the correct format
(4) Url:true must enter the correct format of the URL
(5) Date:true must enter the correct format date
(6) Dateiso:true must enter the correct format for 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, fractional)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter a valid credit card number
(10)Equalto: the "#field" input value must be the same as #field
(11)Accept: Enter a string with a valid suffix name (the suffix of the upload file)
(12)maxlength: 5 Enter a string with a maximum length of 5 (Chinese characters are counted as one character)
(13)minlength: 10 Enter a string with a minimum length of 10 (Chinese characters are counted as one character)
(14)Rangelength: [5,10] Enter a string that must be between 5 and 10 "(Chinese characters are counted as one character)
(15)Range: [5,10] 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

Remote:url
Using AJAX to authenticate, the default is to submit the current validated value to the remote address, if you need to commit additional values, you can use the data option
Remote: "check-email.php"
Remote: {
URL: "check-email.php",//Background handler
Type: "POST",//Data sending method
DataType: "JSON",//Accept data format
Data: {//To be passed
Username:function () {
Return $ ("#username"). Val ();
}
}
}

The remote address can only output "true" or "false", and no other output

Third, the default hints

Messages: {
Required: "This field is required.",
Remote: "Please fix this field.",
Email: "Please enter a valid email address."
URL: "pleaseenter a valid URL.",
Date: "Please enter a valid date.",
Dateiso: "Please enter a valid date (ISO).",
Datede: "Bitte geben Sie ein G EyebrowLtiges 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.",
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 of less than or equal to{0}."),
Min:$.validator.format ("Please enter a value greater than or equal to{0}.")
}

If you need to modify the prompt message, you can add it in the JS code:

Jquery.extend (JQuery.validator.messages, {
Required: "Required field",
Remote: "Please fix this field",
Email: "Please enter the correct format of the e-mail",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date(ISO). ",
Number: "Please enter a valid digit   digits: "Enter only integers ",
  creditcard: "Please enter a valid credit card number   equalto: "Please enter the same value again ",
  accept: " Please enter a string with a valid suffix name   maxlength:jquery.validator.format ("Enter a length of up to  {0}  string   minlength:jquery.validator.format ("Please enter a length of at least  {0}  string   range: JQuery.validator.format ("Please enter a value between  {0}  and  {1}    max:jquery.validator.format ("Enter a value up to {0}    min:jquery.validator.format ("Enter a value of a minimum of {0}  });

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

Jquery.validate.js Form Validation

Related Article

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.