对于JQuery Validate，只有相见恨晚的感触，恐怕在表单验证领域这是目前我见过最好的插件了，可以很方便的使用，极大的提高表单验证的效率。

下面就介绍下简单的使用方法：

1、下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/，本文章发布时最新版是1.7。

2、在页面里面加载JQuery和JQuery Validate

<script type="text/javascript" src="theme/default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="theme/default/js/jquery.validate.min.js"></script>

3、写一个表单提交页面，form id 为 login，两个提交域email和password。域提供相应的id。为了完善demo，我在里面也提供了一个注册的form，同时提供了自定义验证方法和ajax提交。

4、在页面或者单独写个js文件，输入如下代码：

$().ready(function() {
    //身份证验证
    jQuery.validator.addMethod("isIdCardNo", function(value, element) {
        return this.optional(element) || isIdCardNo(value);
    }, "请正确输入您的身份证号码");
    // 电话号码验证
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的电话号码");
    //昵称验证
    jQuery.validator.addMethod("nickName", function(value, element) {
        return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
    }, "昵称只能由中文，英文字母、数字和下划线组成");
    //手机验证
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    // 邮政编码验证
    jQuery.validator.addMethod("isZipCode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");

    $("#login").validate({
        //        submitHandler: function() {
        //            $("#error_tip").hide();
        //            $.ajax({
        //                data:$("#login").serialize(),
        //                // The url you are going to submit to
        //                url: "login.action",
        //                dataType: 'json',
        //                timeout: 10000,
        //                // Sends a message to the console if it failed for testing purposes.
        //                error: function() {
        //                    $("#error_tip").html("<span>服务器忙，请稍后重试。</span>")
        //                },
        //                // If successful you can do something here. You can change elements, update text, or  simply alert the response to first test to see if it worked.
        //                success: function(response) {
        //                        $("#error_tip").html("<span>"+ response.result +"</span>")
        //                        $("#error_tip").show();
        //                }
        //            });
        //        },
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true
            }
        },
        messages: {
            password: {
                required: "请输入密码"
            },
            email: {
                required:"请输入邮件地址",
                email:"请输入有效的邮件地址"
            }
        }
    });

    $("#reg").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote:"checkEmail.action"
            },
            password: {
                required: true,
                minlength: 6,
                maxlength:12
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            answer:{
                required: true
            },
            agree: "required"
        },
        messages: {
            password: {
                required: "请输入密码",
                minlength: "密码长度在6-12个字符之间",
                maxlength: "密码长度在6-12个字符之间"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码长度在6-12个字符之间",
                equalTo: "你输入的密码不一致"
            },
            email: {
                required:"请输入有效的邮件地址",
                email: "请输入有效的邮件地址",
                remote: "邮件地址已存在"
            },
            answer:"请输入安全问题答案",
            agree: "请接受我们的条款"
        }
    });
}

上面的代码基本上包含了大部分JQuery Validate的使用功能：

1、基本验证

2、自定义验证 – 自定义验证跟其他官方的验证类似，加入rules即可，message上面已经定义，可以不加。

3、页面ajax提交。

4、ajax验证Emai帐户是否可用，需要注意的是remote仅支持返回true和false，也就是checkEmail.php只能返回true和false代表Email是否可用

更多Demo，请查看JQuery Validate的官方文档，很好理解：
1、http://docs.jquery.com/Plugins/Validation
2、http://jquery.bassistance.de/validate/demo/