Jquery validate notes

Default category: 20:35:01 read 123 comments 0 font size: large, medium, and small
Jquery. validate is a verification framework of jquery. With the advantages of jquery, we can quickly verify some common input and expand our own verification methods, it also provides good support for internationalization.
Note: JQuery version 1.2.6 + is required.
Steps:
1. Import the corresponding jQuery. js and jquery. validate. js files.
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. validate. js" type = "text/javascript">
2. Specify the verification rules on the corresponding fields.
Name * <input type = "text" name = "loginName" class = "required">
Class = "required" indicates that data must be input in this field.
3. specify the form to be verified
<Script type = "text/javascript">
$ (Function (){
$ ("# TestForm"). validate ();
});
</Script>

The effect is as follows:
1. Basic Knowledge
1.1. specify the method for verifying the rule
1.1.1. Write the verification rules to the class attribute of the field element.
Example:
Name * <input type = "text" name = "loginName" class = "required"> <br>
Password * <input type = "password" name = "password" class = "required"> <br>
Enter <input type = "password" name = "password2" again"
Class = "{failed to: '[name = password]'} required"> <br>
Birthday <input type = "text" name = "birthday" class = "dateISO"> <br>
E-mail * <input type = "text" name = "email" class = "email"> <br>
PAR (zip) <input type = "file" name = "resource" class = "{accept: 'zip'}">

Note:
1. If you use class = "{}", you must introduce the package: jquery. metadata. js.
1.1.2. When the validate () method is called, the verification rules of fields are passed.
$ (Function (){
$ ("# TestForm"). validate ({
Rules :{
LoginName :{
Required: true,
Min: 2
},
Password :{
Required: true
},
Password2 :{
Failed to: "input [name = password]"
}
}
});
});
1.2. built-in verification rules
Required: true mandatory field
Remote: "check. php" uses ajax to call check. php to verify the input value.
Email: true: You must enter an email in the correct format.
Url: true: Enter the url in the correct format
Date: true: the date in the correct format must be entered.
DateISO: true: the date (ISO) in the correct format must be entered. For example, 2010-01-01,2010/01/01 only verifies the format and does not validate the validity.
Number: true: a valid number (negative number, decimal number) must be entered)
Digits: true must be an integer
Creditcard: You must enter a valid credit card number.
Similar to: "# field" the input value must be the same as # field
Accept: "gif | png | jpg": enter a string with a valid suffix (the suffix of the uploaded file). Separate multiple suffixes with '| '.
Maxlength: A string with a maximum length of 5 characters)
Minlength: 10 string with a minimum length of 10 (one character for Chinese characters)
Rangelength: [5, 10] The input length must be a string between 5 and 10. ") (a Chinese character is a character)
Range: [5, 10] The input value must be between 5 and 10.
Max: 5 input values cannot exceed 5
Min: 10 input values cannot be less than 10
Note:
1. remote verification: for example, if the registration and verification username has been registered, the return value can only be true (Verification Successful) or false (Verification Failed ).
2. The quotation marks in some attribute values cannot be omitted; otherwise, an error occurs. Such as accept and failed.
1.3. Custom verification rules
In addition to built-in verification rules, validation also allows you to customize verification rules. This is implemented through the addMethod () method of validation. The syntax is:
JQuery. validator. addMethod ("name", function, message)
Where:
1. name indicates the name of the verification rule.
2. The function defines the validation rules. Which of the following are parameters ?. The returned value is ?.
3. message is the prompt message when verification fails.
1.4. Specify the error message content
1.4.1. Change the default prompt content
JQuery. extend (jQuery. validator. messages ,{
Required: "required fields ",
Remote: "Please correct this field ",
Email: "Please 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 can be entered ",
Creditcard: "enter a valid credit card number ",
Similar to: "Please enter the same value again ",
Accept: "enter a string with a valid suffix ",
Maxlength: jQuery. validator. format ("the maximum length allowed is {0} characters "),
Minlength: jQuery. validator. format ("the minimum length allowed is {0} characters "),
Rangelength: jQuery. validator. format ("the allowed length is between {0} and {1 "),
Range: jQuery. validator. format ("enter a value between {0} and {1 "),
Max: jQuery. validator. format ("enter a maximum value of {0 "),
Min: jQuery. validator. format ("enter a minimum value of {0 ")
Extended tools
StringMinLength: jQuery. validator. format ("enter a string smaller than {0}. The length of a Chinese character is 2 "),
StringMaxLength: jQuery. validator. format ("enter a string greater than}. The length of a Chinese character is 2 "),
String: "contains special characters !",
ByteRangeLength: "Please make sure that the input value is between 3-15 bytes (one text is counted as 2 bytes )",
StringCH: "Only Chinese characters can be entered. One Chinese Character occupies two bytes ",
StringEN: "Only letters can be entered"

1.4.2. The content of the prompt for individual form changes (only valid for the current form)
Method 1:
<Input type = "file" name = "parResource"
Class = "{accept: 'zip', messages: {accept: 'select the correct File'}">

Method 2:
$ (Function (){
$ ("# TestForm"). validate ({
Messages :{
LoginName :{
Required: "required field 2"
},
Email :{
Required: 'required field 22 ',
Email: "enter email in the correct format 2"
}
}
});
});
1.5. Change the error message display style
You can specify the label. error style as follows:
<Style type = "text/css">
Label. error {
Margin-left: 10px;
Color: red;
}
</Style>

Note: label. error refers to the label element whose class is error, for example, <label for = "resource" class = "error">


This is what Mr. Tang sunshine said. Although this teacher is very young, he is very technical and has learned a lot before, so he has some unclear ideas, however, since the teacher gave us a lecture, I felt that he had a kind of spirit about JAVA technology. No matter what he was there, he could always be mentally sublimated! I really admire it!

Function DIYMethod (){
// Minimum character length verification (2 for a Chinese character)
JQuery. validator. addMethod ("stringMinLength", function (value, element, param ){
Var length = value. length;
For (var I = 0; I <value. length; I ++ ){
If (value. charCodeAt (I)> 127 ){
Length ++;
}
}
Return this. optional (element) | (length> = param );
}, $. Validator. format ("length cannot be less than {0 }! "));

// Verify the maximum length of a character (2 Chinese characters)
JQuery. validator. addMethod ("stringMaxLength", function (value, element, param ){
Var length = value. length;
For (var I = 0; I <value. length; I ++ ){
If (value. charCodeAt (I)> 127 ){
Length ++;
}
}
Return this. optional (element) | (length <= param );
}, $. Validator. format ("length cannot exceed {0 }! "));

// Character Verification
JQuery. validator. addMethod ("string", function (value, element ){
Return this. optional (element) |/^ [\ u0391-\ uFFE5 \ w] + $/. test (value );
}, "Special symbols cannot be contained! ");

// Two Chinese characters
JQuery. validator. addMethod ("byteRangeLength", function (value, element, param ){
Var length = value. length;
For (var I = 0; I <value. length; I ++ ){
If (value. charCodeAt (I)> 127 ){
Length ++;
}
}
Return this. optional (element) | (length> = param [0] & length <= param [1]);
}, "Please make sure that the input value is between 3-15 bytes (one text is counted as 2 bytes )");

// Only Chinese characters can be entered
JQuery. validator. addMethod ("stringCH", function (value, element ){
Var length = value. length;
For (var I = 0; I <value. length; I ++ ){
If (value. charCodeAt (I)> 127 ){
Length ++;
}
}
Return this. optional (element) |/[^ u4E00-u9FA5]/g. test (value );
}, "Only Chinese characters can be entered, and one Chinese Character occupies two bytes ");

// Only 26 letters can be entered
JQuery. validator. addMethod ("stringEN", function (value, element ){
Var length = value. length;
For (var I = 0; I <value. length; I ++ ){
If (value. charCodeAt (I)> 127 ){
Length ++;
}
}
Alert (length );
Return this. optional (element) |/^ [A-Za-z] + $/g. test (value );
}, "Only letters allowed ");
}