网站开发常用jQuery插件总结(四)验证插件validation由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“jquery验证插件的使用”。
网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。
jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate
1.jquery.validate插件功能
简单实现客户端信息验证，过滤不符合要求的信息
2.jquery.validate官方地址
官方地址：http://jqueryvalidation.org/,有详细的插件使用说明
官方demo：http://jquery.baistance.de/validate/demo/
3.jquery.validate使用方法
1.引用js
2.c样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。.error{
color:red;
margin-left:8px;
}
3.js代码
$(document).ready(function(){
// validate signup form on keyup and submit
var validator = $(“#signupform”).validate({
rules: {
firstname: “required”,username: {
required: true,minlength: 2
},paword: {
required: true,minlength: 5
},paword_confirm: {
required: true,minlength: 5,equalTo: “#paword”
},email: {
required: true,email: true,},dateformat: “required”,terms: “required”
},meages: {
firstname: “姓名不能为空”,username: {
required: “用户名不能为空”,minlength: jQuery.format(“用户名只少由 {0} 字符组成”)
},paword: {
required: “密码不能为空”,minlength: jQuery.format(“密码只少由 {0} 字符组成”)
},paword_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 cla to error-labels to indicate valid fields
succe: function(label){
// set as text for IE
label.html(“”).addCla(“checked”);
},highlight: function(element, errorCla){
$(element).parent().next().find(“.” + errorCla).removeCla(“checked”);}
});
});
以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如
$.validator.addMethod(“checkUserName”, function(value){
//value为验证的值，对应于元素id
//方法代码
}, '用户名格式不正确');
使用自定义方法也非常简单，只需要 元素id:”checkUserName”
4.使用的html
姓名
用户名
密码
确认密码
邮箱
性别
男
女
以阅读并同意网站条款./>
效果演示：验证插件 validate 测试
