jquery Verification Plug-in validation usage guide _jquery

In the process of web development, sometimes we need to verify that the information entered by the user meets our requirements, so we will validate the data submitted by the user. The verification is performed two times, one at the client and one at the server. Client-side validation can enhance the user experience.

jquery verification Plug-ins are many, the implementation of the same functionality. This article is just a jquery.validate in the jquery verification plug-in

Jquery. Validation is an excellent jquery plug-in that validates client forms and provides a number of customizable properties and methods for good scalability.

1.jquery.validate Plug-in Features

Simple implementation of client information validation, filtering the information that does not meet the requirements

2.jquery.validate official Address

Official address: http://jqueryvalidation.org/, there are detailed instructions for the use of Plug-ins

Official demo:http://jquery.bassistance.de/validate/demo/

How to use 3.jquery.validate

1. Reference JS

<script type= "Text/javascript" src= "jquery.js" ></script> <script type= "Text/javascript"
Jquery.validate.js "></script>

2.css style, customizable, simple to add an error style, or use the style in the official demo.

. error{
  color:red;
  margin-left:8px;
}

3.js Code

$ (document). Ready (function () {//Validate signup form on KeyUp and submit var validator = $ ("#signupform"). Validate (
      {rules: {firstname: "Required", Username: {required:true, minlength:2},
        Password: {required:true, minlength:5}, Password_confirm: {required:true, 
      Minlength:5, Equalto: "#password"}, Email: {required:true, Email:true,}, 
        DateFormat: "Required", terms: "Required"}, messages: {firstname: "Name cannot be empty", Username: { Required: "User name cannot be empty", Minlength:jQuery.format ("User name is limited to {0} characters")}, Password: {requi Red: "Password cannot be empty", Minlength:jQuery.format ("password is composed of {0} characters only)}", Password_confirm: {required: "Confirm
        Password can not be null ", Minlength:jQuery.format (" Confirm password is only limited by {0} characters "), Equalto:" Secret and Confirm password inconsistent "}, email: {
 Required: "Mailbox cannot be empty",       Email: "Mailbox format is not correct"}, DateFormat: "Please select Gender", Terms: ""},//The errorplacement has to take The table layout into account errorplacement:function (error, Element) {if (Element.is (": Radio")) Err
      Or.appendto (Element.parent (). Next (). Next ());
      else if (element.is (": CheckBox")) Error.appendto (Element.next ());
    Else Error.appendto (Element.parent (). Next ());
      },//Specifying a submithandler prevents the default submit, good for the demo submithandler:function () {
    Alert ("submitted!"); },//Set this class to Error-labels to indicate valid fields Success:function (label) {//set   as Te
    XT for IE label.html (" "). AddClass ("checked"); }, Highlight:function (element, Errorclass) {$ (Element). Parent (). Next (). Find ("." + Errorclass). Removeclass ("Che
    Cked ");
}
  });
 });

The above code uses only the properties and methods provided by the plug-in. You can also customize the validation method. Such as

$.validator.addmethod ("Checkusername", function (value) {

    //value for validated value, corresponding to Element ID

  //method code

}, ' username format is incorrect ');

Using a custom method is also very simple, just need the element ID: "Checkusername"

4. Use of HTML

<form id= "Signupform" autocomplete= "Off" method= "get" action= "" > <table> <tr> <td class= "L Abel "><label id=" Lfirstname "for=" FirstName "> Name </label></td> <td class=" field ">< Input id= "FirstName" name= "FirstName" type= "text" value= "" maxlength= ""/></td> <td "status" class= lt;/td> </tr> <tr> <td class= "label" ><label id= "Lusername" for= "username" > User name </lab  el></td> <td class= "field" ><input id= "username" name= "username" type= "text" value= "" maxlength= "50" /></td> <td class= "status" ></td> </tr> <tr> <td class= "label" ><la Bel id= "Lpassword" for= "password" > Password </label></td> <td class= "field" ><input id= "password" Name= "password" type= "password" maxlength= "value=" "/></td> <td, class=" status "></td> </ tr> <tr> &LT;TD class="Label" ><label id= "lpassword_confirm" for= "password_confirm" > Confirm password </label></td> <td class= " Field "><input id=" password_confirm "name=" password_confirm "type=" password "maxlength=" "value=" "/></" Td> <td class= "status" ></td> </tr> <tr> <td class= "label ><label id=" Lem Ail "for=" email > Email </label></td> <td class= "field" ><input id= "email" name= "email" type= "text
    "Value=" "maxlength="/></td> <td class= "status" ></td> </tr> <tr> &LT;TD class= "label" ><label> sex </label></td> <td class= "field" colspan= "2" style= "vertical-a Lign:top; padding-top:2px; " > <table> <tbody> <tr> <td style= "padding-right:5px;" > <input id= "sex_men" name= "DateFormat" type= "Radio" value= "0"/> <label id= "Lbl_sex_men" for= "Dateformat_eu" > Male </label> </td> <td style= "padding-left:5px;" > <input id= "sex_women" name= "DateFormat" type= "Radio" value= "1"/> <label id= "Lbl_sex_women" For= "Dateformat_am" > </label> </td> <td> </td> </tr> </tbody > </table> </td> </tr> <tr> <td class= "label" > </td> &L T;TD class= "Field" colspan= "2" > <div id= "termswrap" > <input id= "terms" type= "checkbox" name= "ter MS "/> <label id=" lterms "for=" terms "> to read and agree to the terms of the website .</label> </div> <!--/termswrap--&
    Gt
    </td> </tr> <tr> <td class= "label" ></td> <td class= "field" colspan= "2" > <input id= "Signupsubmit" name= "signup" type= "submit" value= "registered"/> </td> </tr> </table
 > </form>

More validation method applications see http://jqueryvalidation.org/