JQuery validation plug-in validation User Guide, jqueryvalidation

JQuery validation plug-in validation User Guide, jqueryvalidation

During website development, sometimes we need to verify that the information entered by the user meets our requirements, so we will verify the data submitted by the user. Verification is performed twice, on the client and on the server. Client verification can improve user experience.

There are many jquery verification plug-ins and the functions are basically the same. This document only describes jquery. validate in the jquery verification plug-in.

Jquery. Validation is an excellent jquery plug-in that can verify the client form and provides many customizable attributes and methods for good scalability.

1. jquery. validate plug-in Function

Simple client information verification, filtering out non-conforming Information

2. jquery. validate official address

Official Address: http://jqueryvalidation.org/, detailed plug-in instructions for use

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

3. jquery. validate usage

1. Reference js

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

2.css style, which can be customized. You can simply add the 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, failed to: "# password"}, email: {required: true, email: true,}, dateformat: "required", terms: "required"}, me Ssages: {firstname: "name cannot be blank", username: {required: "username cannot be blank", minlength: jQuery. format ("username only consists of {0} characters")}, password: {required: "password cannot be blank", minlength: jQuery. format ("the password only consists of {0} characters")}, password_confirm: {required: "The password cannot be blank", minlength: jQuery. format ("the password is only composed of {0} characters"), failed to: "The password is inconsistent with the password"}, email: {required: "The email cannot be blank ", email: "Incorrect email format"}, dateformat: "select gender", terms: ""}, // the errorPl Acement has to take the table layout into account errorPlacement: function (error, element) {if (element. is (": radio") error. 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 text for IE label.html (""). addClass ("checked") ;}, highlight: function (element, errorClass) {$ (element ). parent (). next (). find (". "+ errorClass ). removeClass ("checked ");}});});

The above Code only uses the attributes and methods provided by the plug-in. You can also customize the verification method. For example

$. Validator. addMethod ("checkUserName", function (value) {// value is the verification value, corresponding to the element id // method code}, 'username format incorrect ');

The user-defined method is also very simple. Only the element id is required: "checkUserName"

4. html

<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 = "100"/> </td> <td class = "status"> </td> </tr> <td class = "label"> <label id = "lusername" for = "username"> User Name </label> </td> <td class = "field"> <input id =" username "n Ame = "username" type = "text" value = "" maxlength = "50"/> </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 =" 50 "value =" "/> </td> <td class =" status "> </td> </tr> <td class =" label "> <label id =" lpassword_confirm "for =" password_confirm "> confirm the password </label> </td> <td cl Ass = "field"> <input id = "password_confirm" name = "password_confirm" type = "password" maxlength = "50" value = ""/> </td> <td class = "status"> </td> </tr> <td class = "label"> <label id = "lemail" for = "email"> email </label> </td> <td class = "field"> <input id = "email" name = "email" type = "text" value = "" maxlength = "150 "/> </td> <td class =" status "> </td> </tr> <td class =" label "> <label> gender </ label> </td> <td class = "fiel D "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 "> 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 "> female </label> </td> <Td> </tr> </tbody> </table> </td> </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> <td class = "label"> </td> <td class = "field" colspan = "2"> <input id = "signupsubmit" name = "signup" type = "submit" value = "register"/> </td> </tr> </table> </form>

For more verification method applications, see http://jqueryvalidation.org/