jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求，下面我们就来仔细研究下这款jQuery插件的具体使用方法。

　　在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。

　　jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate

　　jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。

　　1.jquery.validate插件功能

　　简单实现客户端信息验证，过滤不符合要求的信息

　　2.jquery.validate官方地址

　　官方地址：http://jqueryvalidation.org/,有详细的插件使用说明

　　官方demo：http://jquery.bassistance.de/validate/demo/

　　3.jquery.validate使用方法

　　1.引用js

　　?

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

　　2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。

　　?

1 2 3 4 .error{ color:red; margin-left:8px; }

　　3.js代码

　　?

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 62 63 64 65 66 67 68 69 70 $(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: "姓名不能为空", username: { required: "用户名不能为空", minlength: jQuery.format("用户名只少由 {0} 字符组成") }, password: { required: "密码不能为空", minlength: jQuery.format("密码只少由 {0} 字符组成") }, password_confirm: { required: "确认密码不能为空", minlength: jQuery.format("确认密码只少由 {0} 字符组成"), equalTo: "秘密与确认密码不一致" }, email: { required: "邮箱不能为空", email: "邮箱格式不正确" }, dateformat: "请选择性别", terms: " " }, // the errorPlacement 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"); } }); });

　　以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如

　　?

1 2 3 4 5 6 7 $.validator.addMethod("checkUserName", function(value) {   //value为验证的值，对应于元素id   //方法代码   }, '用户名格式不正确');

　　使用自定义方法也非常简单，只需要 元素id:”checkUserName”

　　4.使用的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 43 44 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">姓名</label></td> <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /