JQuery validation jQuery Validate Form Verification details

Source: Internet
Author: User
Tags valid email address

JQuery validation jQuery Validate Form Verification details
 
1. Import the js Library

<Script src = ../js/jquery. js type = text/javascript> </script>
<Script src = ../js/jquery. validate. js type = text/javascript> </script>

Ii. Default verification rules

(1) required: true Mandatory Field
(2) remote: check. php Use 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 Enter the URL in the correct format
(5) date: true An error occurred while verifying ie6 by entering a date in the correct format. Use it with caution.
(6) dateISO: true You must enter a date (ISO) in the correct format, 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 An integer is required.
(9) creditcard: You must enter a valid credit card number.
(10) failed 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: 5 A string with a maximum length of 5 characters)
(13) minlength: 10 A string with a minimum input length of 10 (one character for Chinese characters)
(14) rangelength: [5, 10] The input must be a string between 5 and 10 characters)
(15) range: [5, 10] The input value must be between 5 and 10.
(16) max: 5 The 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 field,
Remote: correct this field,
Email: 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 are allowed,
Creditcard: enter a valid credit card number,
Similar to: Enter the same value again,
Accept: enter a string with a valid suffix name,
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 the 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 method 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 ();
});

 

 

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 '}

2. Write validation rules to 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,
Failed to: # password
}
},
Messages :{
Firstname: Enter the 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 for confirmation,
Minlength: the password cannot be less than five characters long,
Similar to: the two passwords are inconsistent.
}
}
});
});

// If a control does not have a message, the default message is called.

 

 

Required: true must have a value
If the value of required: # aa: checked expression is true, verification is required.
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 form

 

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.