Jquery Form Verification plug-in (jquery. validate. js), jqueryvalidate plug-in

Jquery Form Verification plug-in (jquery. validate. js), jqueryvalidate plug-in

Jquery verification is very simple. Below are three common methods:

Method 1: it is also a standard method:

First introduce the jquery plug-in and the jquery validation plug-in:

Step 1: Introduce plug-ins
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "js/jquery-1.6.1.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. validate. js"> </script>
<Script type = "text/javascript" src = "js/jquery. metadata. js"> </script>
<Script type = "text/javascript" src = "js/messages_zh.js"> </script>

Step 2: Define the error output of the form:
Copy codeThe Code is as follows:
<Style type = "text/css">
# Frm label. error {
Color: Red;
}
</Style>

Step 3: add an error handling method;

Jquery verification requires:

1: define verification methods
2: Add verification rules

The following is a small example of common verification.

First look:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
This is a complete verification example. You can click to download the imported code.
The following describes the key methods:

JQuery. validator. addMethod ("byteMaxLength", 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 ("cannot exceed {0} bytes (two bytes for one text )"));
JQuery. validator. addMethod () method, which has three parameters,
The first parameter: "byteMaxLength" is the method name defined. It must be unique and is an identifier flag.
The second parameter is the following callback function:

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);}
The callback function has three parameters:
First: value, which is the value of the currently verified element.
Second, element is the currently verified element.
The third parameter is the input parameter. For example, the value of min: 5 is 5. When this method is called, for example, byteMaxLength: 10, 10 is the input parameter.
The method for this method is: byteMaxLength callback function as above,
The callback function is used to verify the number of input bytes. One Chinese Character represents two characters with an ASCII code ranging from 0 to. One of the following statements is returned:
Return this. the function call optional (element) indicates that it is used for verification when the input value of the form is not empty. When the field is empty, that is, the element value is null, this. optional (element) = true, that is, the filed is not required. If this parameter is not specified, it is verified. If the element value is not empty, this. optional (element) = false it is necessary to judge whether the return value is true or false Based on | the purpose of the subsequent verification. In summary, this. optional (element) is used to indicate that the field currently verified is not required.
The third parameter is as follows:
Copy codeThe Code is as follows:
$. Validator. format ("cannot exceed {0} bytes (one text is counted as two bytes )")

The third parameter can be a message that indicates the verification prompt. to display the function verification information, you can also create the function jQuery. validator. format (value). {0} indicates the parameters of the method. If the input above is byteMaxLength: 10, it cannot exceed 10 bytes, (two bytes for one text)
Let's take a look at this Code:

$ ("# Frm "). validate ({rules: {username: {required: true, minlength: 4, maxlength: 20, byteMaxLength: 20, valiEnglish: true}, postcode: {postcodeVal: true}, number: {byteMaxLength: 5, numFormat: 5}, identifier: {sfzhValidate: true}, messages: {username: {required: "Enter the user name 4-20 English characters", minlength: $. format ("Keep typing, at least {0} characters required! "), Maxlength: $. format (" Whoa! Maximum {0} characters allowed! ")}, Number: {numFormat: $. format (" Enter {0} number ")}}});
First, this is a method call.
Copy codeThe Code is as follows:
$ ("# Frm"). validate ([options])

Verify the selected form. The method parameter is optional. You can enter 0 or key-value pairs (key/value)
This method is used to process the elements that trigger verification, such as submit, focus, keyup, blur, and click. The object is an element of the entire form or a single element, and the elements that are verified are defined using rules and messages, use errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle to control error information display of illegal elements.
The following describes the validate method rules ();
Return the validation rules for the first selected element. There are several ways to define the validation rules.
The rules method defines id-based verification,
Copy codeThe Code is as follows:
Username :{
Required: true,
Minlength: 4,
Maxlength: 20,
ByteMaxLength: 20,
ValiEnglish: true
}

Above: Here, username is the id name, and {} is the defined verification method, which is required for this id, and the method name is the method mentioned above;
This is defined.
Messages defines:
Copy codeThe Code is as follows:
Username :{
Required: "Enter the user name 4-20 English characters ",
Minlength: $. format ("Keep typing, at least {0} characters required! "),
Maxlength: $. format ("Whoa! Maximum {0} characters allowed! ")
}


Method verification error message in this id. You can directly output the message or call the $. format () method.
The above standard format is:
Copy codeThe Code is as follows:
Var $ params = {debug: false, rules :{}, messages :{}};
$ ("# Frm"). validate ($ params );

Define the verification rule method in rules. Messages {} defines the error output.
The above is the first method:
The second method is similar to the first one:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
The code for the second method is as follows:
The method definition is the same as the first one: call:
Copy codeThe Code is as follows:
Function check_infor (){
 
$ ("# Username"). attr ("class", "{byteMaxLength: 22, valiEnglish: true }");
$ ("# Postcode"). attr ("class", "{byteMaxLength: 6, postcodeVal: true }");


$ ("# Number"). attr ("class", "{byteMaxLength: 6, numFormat: 6 }");
$ ("# Identifier"). attr ("class", "{sfzhValidate: true }");
 
}


A javascript method is defined to verify the id to be verified in the form:
The. attr () method is used: This method has many parameter forms. attr (attributeName, value) method.
AttributeName is the parameter name. value is the parameter value.
The following means is the class attribute of the element whose id is username to add a value:
Copy codeThe Code is as follows:
"{ByteMaxLength: 22, valiEnglish: true }"

Copy codeThe Code is as follows:
$ ("# Username"). attr ("class", "{byteMaxLength: 22, valiEnglish: true }");

In this way, the id element is verified.
Note: Before calling the custom check_infor (), you must first call the $ ("# frm"). valudate (); method;
Method 3:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

The third method is different from the other two methods:
Copy codeThe Code is as follows:
$ ('# Username'). rules ('add', {required: true, byteMaxLength: 20, valiEnglish: true });
$ ('# Postcode'). rules ('add', {postcodeVal: true });
$ ('# Number'). rules ('add', {byteMaxLength: 5, numFormat: 5 });
$ ('# Identifier'). rules ('add', {sfzhValidate: true });


Add verification rules for each element. The rules ("add", rules) method is called:
Add verification rules as matching elements.
Note: The $ ("form"). validate () method must be called first.
This rule can also contain a messages-object that defines commonly used messages.