jquery Verification Plug-in Validation usage guide

Jquery.validation.js in the front-end verification is very convenient to use, the functionality provided basically to meet most of the verification requirements, the following we will carefully study the use of the jquery plug-in specific methods.

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

?

1 2	<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.

?

1 2 3 4

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

3.js Code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 The "border:0;padding:0" of the

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

?

1 2 3 4 5 6 7

$.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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67-68

<form id= "Signupform" autocomplete= "Off" method= "get" action= "" > <table> <tr> <td class= "label" ><label id= "Lfirstname" for= "FirstName" > Name </label></td> <td class= "field" ><input id= " FirstName "Name=" FirstName "type=" text "value=" "maxlength=",/></td> <td "status" class= > </tr> <tr> <td class= "label" ><label id= "Lusername" for= "username" > User name </label>< /TD> <td class= "field" ><input id= "username" name= "username" "type=" text "value=" "maxlength=" "/></" Td> <td class= "status" ></td> </tr> <tr> <td class= "label" ><label 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> <TD class= "label" ><label id= "lpassword_confirm" for= "Password_confir"M "> 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= "Lemail" for= "email" > Mailbox </label></td> <td class= "field" > <input id= "Email" name= "email" type= "text" value= "" maxlength= "", "/></td> <td class=" status "></ td> </tr> <tr> <td class= "label" ><label> sex </label></td> <td class= "field" Colspan= "2" style= "vertical-align: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 "> Men </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 "> Women </label> </td> <td> </td> </tr> </tbody> </table> </td> </tr>   <tr> <td class= "label" > </td> <td class= "field" colspan= "2" > <div id= "termswrap" > <input id= "terms" type= "checkbox" name= "terms"/> "<label id=" lterms "for=" Terms > to read and agree to the terms of the website .</label> </div> <!--/termswrap--> </td> </tr> <tr> <TD class= "label" ></td> <td class= "field" colspan= "2" > <input id= "signupsubmit" name= "signup" Type= "Submit" value= "register"/> </td> </tr>   </table> </form>