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
<scripttype="text/javascript"src="jquery.js"></script> <scripttype="text/javascript"src="jquery.validate.js"></script>
2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。
.error{
color:red;
margin-left:8px;
}
3.js代码
$(document).ready(function(){
//validatesignupformonkeyupandsubmit
varvalidator=$("#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:""
},
//theerrorPlacementhastotakethetablelayoutintoaccount
errorPlacement:function(error,element){
if(element.is(":radio"))
error.appendTo(element.parent().next().next());
elseif(element.is(":checkbox"))
error.appendTo(element.next());
else
error.appendTo(element.parent().next());
},
//specifyingasubmitHandlerpreventsthedefaultsubmit,goodforthedemo
submitHandler:function(){
alert("submitted!");
},
//setthisclasstoerror-labelstoindicatevalidfields
success:function(label){
//set astextforIE
label.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
<formid="signupform"autocomplete="off"method="get"action=""> <table> <tr> <tdclass="label"><labelid="lfirstname"for="firstname">姓名</label></td> <tdclass="field"><inputid="firstname"name="firstname"type="text"value=""maxlength="100"/></td> <tdclass="status"></td> </tr> <tr> <tdclass="label"><labelid="lusername"for="username">用户名</label></td> <tdclass="field"><inputid="username"name="username"type="text"value=""maxlength="50"/></td> <tdclass="status"></td> </tr> <tr> <tdclass="label"><labelid="lpassword"for="password">密码</label></td> <tdclass="field"><inputid="password"name="password"type="password"maxlength="50"value=""/></td> <tdclass="status"></td> </tr> <tr> <tdclass="label"><labelid="lpassword_confirm"for="password_confirm">确认密码</label></td> <tdclass="field"><inputid="password_confirm"name="password_confirm"type="password"maxlength="50"value=""/></td> <tdclass="status"></td> </tr> <tr> <tdclass="label"><labelid="lemail"for="email">邮箱</label></td> <tdclass="field"><inputid="email"name="email"type="text"value=""maxlength="150"/></td> <tdclass="status"></td> </tr> <tr> <tdclass="label"><label>性别</label></td> <tdclass="field"colspan="2"style="vertical-align:top;padding-top:2px;"> <table> <tbody> <tr> <tdstyle="padding-right:5px;"> <inputid="sex_men"name="dateformat"type="radio"value="0"/> <labelid="lbl_sex_men"for="dateformat_eu">男</label> </td> <tdstyle="padding-left:5px;"> <inputid="sex_women"name="dateformat"type="radio"value="1"/> <labelid="lbl_sex_women"for="dateformat_am">女</label> </td> <td> </td> </tr> </tbody> </table> </td> </tr> <tr> <tdclass="label"> </td> <tdclass="field"colspan="2"> <divid="termswrap"> <inputid="terms"type="checkbox"name="terms"/> <labelid="lterms"for="terms">以阅读并同意网站条款.</label> </div><!--/termswrap--> </td> </tr> <tr> <tdclass="label"></td> <tdclass="field"colspan="2"> <inputid="signupsubmit"name="signup"type="submit"value="注册"/> </td> </tr> </table> </form>
更多验证方法的应用请查看http://jqueryvalidation.org/