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