jQuery验证插件validation使用指南

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

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

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

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

3.js代码

$（document）.ready（function（） {// validate signup form on keyup and submitvar 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 accounterrorPlacement: function（error, element） {if （ element.is（":radio"） ）error.appendTo（ element.parent（）.next（）.next（））;else if （ element.is（":checkbox"） ）error.appendTo （ element.next（））;elseerror.appendTo（ element.parent（）.next（））;},// specifying a submitHandler prevents the default submit, good for the demosubmitHandler: function（） {alert（"submitted！"）;},// set this class to error-labels to indicate valid fieldssuccess: function（label） {// set   as text for IElabel.html（" "）.addClass（"checked"）;},highlight: function（element, errorClass） {$（element）.parent（）.next（）.find（"." + errorClass）.removeClass（"checked"）;}}）;}）;

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

$.validator.addMethod（"checkUserName", function（value） {//value为验证的值，对应于元素id//方法代码}, "用户名格式不正确"）;

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

<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" /></td><td class="status"></td> </tr> <tr><td class="label"><label id="lusername" for="username">用户名</label></td><td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td><td class="status"></td> </tr> <tr><td class="label"><label id="lpassword" for="password">密码</label></td><td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td><td class="status"></td> </tr> <tr><td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td><td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td><td class="status"></td> </tr> <tr><td class="label"><label id="lemail" for="email">邮箱</label></td><td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td><td class="status"></td> </tr> <tr><td class="label"><label>性别</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">男</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><td class="field" colspan="2"><div id="termswrap"><input id="terms" type="checkbox" name="terms" /><label id="lterms" for="terms">以阅读并同意网站条款.</label></div> <！-- /termswrap --></td> </tr> <tr><td class="label"></td><td class="field" colspan="2"><input id="signupsubmit" name="signup" type="submit" value="注册" /></td> </tr> </table></form>

更多验证方法的应用请查看http://jqueryvalidation.org/