Jquery validate plugin advanced form verification, jqueryvalidate

Jquery validate plugin advanced form verification, jqueryvalidate

The validate plug-in provides another method to add verification for a form without changing the HTML of the field. In addition, this plug-in provides a wide range of additional options to control how it works. We pass an object volume to the validate () function to set these options, including the separate objects of each option. For example, to specify a validation rule, we include an object of the code of the rule. First, after the first parentheses of the validation function, we include a starting curly braces and place an ending curly braces before the ending parentheses of the function.

The curly braces indicate the direct quantity of an object, which includes the option settings. Using Validation in this way may be confusing. To understand how the plug-in author wants it to work, the best way is to look at a simple example, as shown in 9-6.

Figure 9-6 even if such a simple form is used, advanced options of the Validation plug-in can be used for better control.

Tip: We can combine jquery validate's basic verification method http://www.uphtm.com/js/432.htmland the advanced verification token introduced here to the same table. For fields with only one verification rule and error message, you can use the basic verification method because it is fast, and only uses advanced verification methods for more complex verification.

The html of the form in Figure 9-6 is as follows:

This form contains two text fields, which are displayed in bold. One is the name of the person and the other is the e-mail address. This section processes the verification of these two fields and uses advanced rules to ensure that both the name field and the e-mail field are filled and the format is correct.

Note: You can.

Validate advanced rules

An advanced method for specifying a verification rule includes passing an object that contains the form field name and verification rules or rules to be applied to this field. The basic structure of this object is as follows:

The object name is rules. You can specify the field and the verification type to be applied to the field. Then, the entire object is passed to the validate () function. For example, in the form shown in Figure 9-6, to make the name field necessary, you can apply the validate () function to the previously described field and then pass the rules object to the function, as follows:

In this example, the field name is name and the rule specifies this field is required. To apply multiple verification rules to a form field, you must create another object for this field. For example, to extend the verification rules for the form in Figure 9-6, you can add a rule that not only makes the email field necessary, but also specifies that the e-mail address must be in a valid format:

Note: according to the rule of Direct Volume of JavaScript objects, each name/value pair must be ended with a comma, except for the last name/value pair. For example, in the first line of the code above, name: 'required' must be followed by a comma, because other rules (for email fields) follow ..

Bold lines 4th to 7th, specifying rules for email fields. The name of this field is email, as specified in HTML. required: true makes this field necessary, while email: true ensures that the field contains an e-mail address.

You can use any verification type listed in Table 9-2. For example, add a field named birthday to the form used in this example. To ensure that the date is entered in this field, you can extend the rule list as follows:

If you want to make the birthday field necessary, you can adjust the Code as follows:

As mentioned above, the most powerful and useful thing that can be done for advanced verification rules is to require a visitor's input to have a minimum or maximum length. For example, in a complaint report form, we may want to limit the comment length, for example, 200 characters. In this way, the customer will cut down the key points rather than a long article. There are also rules to ensure that the number entered is within a certain range (reprinted please note the Source: http://www.uphtm.com/js/433.html) So if the form is not easy enough for the Ancients to use, we do not accept the date of birth before January 1, 1900.

· Minlength. This field must contain at least a specified number of characters. For example, the rule that ensures that a field contains at least six characters is:

· Maxlength. This field must contain no more than a specified number of characters. For example, the rule that ensures that no more than 100 characters are entered in the field is:

· Rangelength. A combination of minlength and maxlength. Specifies the minimum and maximum characters allowed in a field. For example, to ensure that a field contains at least 6 characters but not more than 100 characters, the rule is:

· Min. The field must contain a value that is equal to or greater than the specified value. For example, the following rule requires a field to contain a value greater than or equal to 10.

In this example, if the visitor inputs 8, the field cannot pass the verification because 8 is less than 10. Similarly, if a visitor enters the word "eight", the field cannot be verified and an error message is generated.

· Max. The value is the same as min, but the maximum value that a field can contain is specified. For example, to ensure that a field contains less than 1000 values, you can use the following rules:

· Range. Min and max are combined to specify the minimum and maximum values that a field must contain. For example, to ensure that a field contains at least 10 but not more than 1000 values, you can use:

· Similar. One field must match other fields. For example, in a login form, a visitor is usually required to enter a password and then re-enter the password to verify it. In this way, visitors can ensure that no wrong password is entered for the first time. To use this method, you must specify a string containing a valid selector. For example, assume that the First password field has an ID of password. To ensure that the "verify password" field matches the First password field, use this code:

These advanced verification rules can be combined. You only need to process one field at a time. Here is an example of how they work together. Assume that one form contains two fields: one for creating a password and the other for confirming the password. The HTML of these two fields is as follows:

Both fields are required, and the password must contain at least 8 characters, but cannot exceed 16 characters. Finally, make sure that the "Confirm Password" field matches other password fields. If the form ID is signup, you can use the following code to verify the two fields:

Reprinted please indicate the source: http://www.uphtm.com/js/433.html