jquery Validate plug-in advanced form validation

The Validation (validate) plugin provides another way to add validation to a form without needing to change the HTML of the field. In addition, this plugin provides a wide range of additional options to control how it works. We set these options by passing an object's direct amount to the Validate () function, which contains a separate object for each option. For example, to specify a validation rule, we have an object that contains the code for that rule. First, following the first parenthesis of the validation function, we include a opening curly brace, and a closing brace in front of the closing parenthesis of the function.

1. $ (' Idofform '). Validate ({
2. Options Go
3. });//end validate ();

This pair of curly braces represents an object's direct amount, which will contain the option settings. Using validation in this way can be a bit confusing, and the best way to understand how the plug-in author wants it to work is to look at a simple example, shown in 9-6.

Figure 9-6 Even with such a simple form, you can use the advanced options of the validation plugin for better control

Tip: We can combine the jquery validate basic validation method http://www.uphtm.com/js/432.html and the advanced authentication methods described here on the same form. For a field that has only one validation rule and error message, you can use the Basic authentication method because it is fast, but uses advanced authentication methods for more complex validation.

The HTML for the form in Figure 9-6 is as follows:

3. name
7. e-mail Address

This form contains two text fields, shown in bold, one for the person's name and one for the e-mail address. This section deals with validation of these two fields, using advanced rules to ensure that both the Name field and the e-mail field are populated and formatted correctly.

Note: A complete list of options for the Validation plugin can be found in http://docs.jquery.com/Plug-ins/Validation/validate#options.

Validate Advanced Rules

The advanced methods for specifying validation rules include passing an object that contains the form field name and validation rules, or the rules that you want to apply to the field. The basic structure of the object is as follows:

1. rules:{
2. FieldName: ' ValidationType '
3. }

The object name is rules, where you can specify the field and the type of validation you want to apply to the field. The entire object is then passed to the Validate () function. For example, in the form shown in Figure 9-6, in order for the Name field to be required, you can apply the Validate () function to the field described previously, and then pass the rules object to the function, as follows:

1. $ (' #signup '). Validate ({
2. rules:{
3. Name: ' Required '
4. }
5. });//end Validate ()

In this example, the field is named name, and the rule specifies that the field is required. To apply more than one validation rule to a form field, you must create another object for it. For example, to extend the validation rule 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:

1. 1$ (' #signup '). Validate ({
2. 2 rules:{
3. 3 Name: ' Required ',
4. 4 email:{
5. 5 Required:true,
6. 6 Email:true
7. 7}
8. 8}
9. 9});//end Validate ()
10. Original: www.uphtm.com

Note: Depending on the rules of the direct volume of JavaScript objects, we must end each name/value pair with a comma, except for the last name/value pair. For example, in line 3rd of the above code, name: ' Required ' must be followed by a comma, because the other rules (for the email field) follow the following:

Lines 4th through 7th in bold indicate the rules for the email field. The name of this field is email, as specified in HTML, Required:true makes the field mandatory, and email:true ensures that the field contains an e-mail address.

You can use any of the validation types that are listed in table 9-2. For example, suppose you add a field named Birthday to the form used by this example. To ensure that you enter a date in this field, you can extend the list of rules as follows:

1. $ (' #signup '). Validate ({
2. rules:{
3. Name: ' Required ',
4. email:{
5. Required:true,
6. Email:true
7. }，
8. Birthday: ' Date '
9. }
10. });//end Validate ()
11. Original: www.uphtm.com

If you also want the birthday field to be required, you can adjust the code as follows:

1. $ (' #signup '). Validate ({
2. rules:{
3. Name: ' Required ',
4. email:{
5. Required:true,
6. Email:true
7. }，
8. birthday:{
9. Date:true,
10. Required:true
11. }
12. }
13. });//end Validate ()
14. Original: www.uphtm.com

As mentioned earlier, the most powerful and useful thing you can do with advanced validation rules is to require a visitor's input to have a certain minimum or maximum length. For example, on a complaint report form, we may want to limit the length of a comment, for example, 200 characters, so that the customer will hit the point rather than a lengthy one. There are also rules to ensure that the number entered is within a certain range, (reproduced please specify Source: http://www.uphtm.com/js/433.html) Therefore, if the form is not easy enough for the ancients to use, we do not accept the date of birth 1900 years ago.

minlength. This field must contain at least the specified number of characters. For example, a rule that ensures that a field has entered at least 6 characters is:

1. Minlength:6

maxlength. This field must contain no more than a specified number of characters. For example, make sure that no more than 100 characters entered in a field are:

1. maxlength:100

Rangelength. A combination of minlength and maxlength. Specifies the minimum number of characters and the maximum number of characters allowed in a field. For example, a rule that ensures that a field contains at least 6 characters and no more than 100 characters is:

1. RANGELENGTH:[6,100]

min. The requirement field contains a numeric value and is equal to or greater than the specified value. For example, the following rule requires that a field contain a numeric value that is greater than or equal to 10.

1. Min:10

In this example, if the visitor enters 8, the field cannot be validated because 8 is less than 10. Similarly, if a visitor enters a word eight, the field is not validated and an error message is generated.

Max. Same as Min, but specifies the maximum value that the field can contain. For example, to make sure that a field contains less than 1000 values, you can use the following rules:

1. max:1000

range. Combines min and Max to specify the minimum and maximum values that a field must contain. For example, to make sure that a field contains a value of at least 10 but not more than 1000, you can use:

1. RANGE:[10,1000]

Equalto. Requires one field content to match other fields. For example, on a login form, a visitor is typically asked to enter a password and then verify it by entering the password again. In this way, visitors can ensure that the first time there is no wrong password. To use this method, you must specify a string that contains a valid selector. For example, suppose the first password field has an ID of password. If you want to make sure that the Verify password field matches the first password field, you can use this code:

1. Equalto: ' #password '

You can use these advanced validation rules in combination. Just one field at a time is OK. Here is an example of how they work together. Suppose you have a form that contains two fields, one for creating a password, and another for confirming the password. The HTML for these two fields is as follows:

Both fields are required, and the password must be at least 8 characters, but no more than 16 characters. Finally, we want to make sure that the Confirm password field matches the other password fields. Assuming the form's ID is signup, you can verify the two fields with the following code:

1. $ (' #signup '). Validate ({
2. rules:{
3. password:{
4. Required:true,
5. RANGELENGTH:[8,16]
6. }，
7. confirm_password:{
8. Equalto: ' #password '
9. }
10. }
11. });//end Validate ()

Reprint Please specify source: http://www.uphtm.com/js/433.html

jquery Validate plug-in advanced form validation