jquery Basic Learning, jquery form validation plugin-validation

The basic part of jquery is done before, so look at the plugin.

About the jquery form validation plugin-validation

Validation Features:

• Built-in validation rules: 19 Types of built-in validation rules for required, digital, e-mail, URL, and credit card numbers
• Custom validation rules: You can easily customize validation rules
• Simple and powerful authentication information hint: Default validation information hint, and provide custom override the default prompt information function
• Real-time validation: Validation can be triggered by keyup or blur events, not just when the form is submitted

How to use:

2. Referencing the jquery library and the validation plugin

   <type= "Text/javascript"  src= "Jquery-2.2.0.min.js"> </script><type= "Text/javascript" src = "Jquery.validate.min.js" ></ Script >

4. Determine which form needs to be validated, then call to

   $ ("#myForm"). Validate ();

6. Encode the validation rules for different fields, set the corresponding properties of the fields

   <id= "username"  name= "username"  class= "required Email "  minilength=" 2 "/><!-- on the above set required is required, Email verifies if it is a mailbox, and if it is a URL, verify that url,minilength=2 is a minimum length of 2-- --

Better ways to use:

The following gameplay is done to achieve the separation of behavior and structure by using the name attribute to correlate fields and validate the rules of validation, in order to make them unrelated to HTML elements.

• Page

  <id= "myname"  name= "username"/>

• Code

     $ ("#myform"). Validate ({        rules:{            username:{                required:true,                minlength:2,                email:true            },            url: "url",            Comment: "Required"        }    );

Internationalization

The authentication information for this plugin is in English by default. Then to get into Chinese, it is necessary to quote a new document:

Jquery.validate.messages_cn.js

Customizing validation information

The Valication plugin makes it easy to customize validation rules.

$ ("#myform"). Validate ({        rules:{            username:{                required:true,                minlength:2,                email:true            }        }        , messages:{            username:{                required: ' Please enter your account email ',
                Email: ' Please enter the correct email address '}}}    );

Customize validation information and beautify

For example, to add a picture to a validation prompt:

$ ("#myform"). Validate ({rules:{username:{required:true, minlength:2, Email:true}}, Errorelement:"Myerrorelement"//used to create error message prompt labels, Success:function(label) {//callback function executed after validation succeeds            //Label pointing to the above error message label MyerrorelementLabel.text ("")//empty the error message prompt. addclass ("Success");//Adding a custom success class        }    });

Then add the corresponding style to the CSS:

Myerrorelement.error {    background:url ("2.ico") no-repeat 0px 0px;     padding-left:48px;} myerrorelement.success {    background:url ("1.png") no-repeat 0px 0px;     padding-left:48px;}

Custom validation Rules

Here is the code that implements the CAPTCHA function with this jquery plugin

• Page

  < P >    <  for = "Myvalcode"> captcha </label>    <  ID= "Myvalcode"  name= "Valcode">=7+9  </p>

• Code

  //Customizing a validation method$.validator.addmethod ("Formula",        function(value,element,param) {returnvalue==eval (param); },        ' Please enter the results of the mathematical formula correctly. '    ); //Call this validation rule$ ("#myform"). Validate ({rules:{username:{required:true, minlength:2, Email:true}, Valcode:{formula:7+9}        }    });

jquery Basic Learning, jquery form validation plugin-validation