jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

以下为JQuery Validate验证插件在实际中项目运用中使用的代码示例：

表单HTML代码：

<form id="login-regis">
    <input type="hidden" name="inviterId" value="">
    <ul>
        <li>
            <input class="account" operaType="register" id="loginId" name="loginId" type="text" autocomplete="off" placeholder="请输入常用手机号">
            <p class="error_mess"></p>
            <a href="/reset/password.html" class="last uhide">找回密码</a>
        </li>
        <li>
            <input class="passw" id="password" name="password" type="password" autocomplete="off" placeholder="请输入密码">
            <p class="error_mess"></p>
            <span class="eye"></span>
            <div style="clear: both;"></div>
        </li>
        <li>
            <input class="short-message"  id="captcha" name="captcha" type="text" autocomplete="off" placeholder="请输入短信验证码" value="">
            <a href="javascript:;" id="short_but">发送验证码</a>
            <p class="error_mess"></p>
            <div id="popup-captcha"> <div class="gt_input"> <input class="geetest_challenge" type="hidden" name="geetest_challenge"/> <input class="geetest_validate" type="hidden" name="geetest_validate"/> <input class="geetest_seccode" type="hidden" name="geetest_seccode" /> </div> </div>
        </li>
    </ul>
    <div class="text-center clearB"><a href="javascript:void(0);" class="agreen-regis" id="regisBtn">同意并注册</a></div>
</form>

JQuery代码：

$(function() {
    var loginCheck = {},
        flag = 1; //flag==0则验证不通过
    var regTel = /^0?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/; //手机
    var regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/; //邮箱
    var operaType = $("#login-regis").attr("operaType");
    var shortCode = /[a-zA-Z0-9\!\(\)\-\~\@\.\_\^\#\%\&\*]{4,6}$/;
    // 登录账户判断
    loginCheck.account = function(obj) {
        var mes = "";
        if (($.trim(obj.val()) != "") && !regTel.test($.trim(obj.val()))) {
            flag = 0;
            obj.siblings(".error_mess").html("请输入正确格式的手机号");
        } else {
            flag = 1;
            obj.siblings(".error_mess").html("");
        }
    }

    // 点击眼睛图片显示密码 mousedown显示密码 mouseup还原
    $(document).on("mousedown", ".loginSection .eye", function() {
        $("input[name='password']").attr("type", "text");
        $(document).on("mouseup", ".loginSection .eye", function() {
            $("input[name='password']").attr("type", "password");
        })
    })

    $("#login-regis input").keydown(function(event) {
        if (event.keyCode == 13) {
            if ($(this).is("#captcha")) {
                $("#login-regis").submit();
            } else {
                $(this).parent().next().find("input").focus();
            }
        }
    })
    // 登录注册提交前校验
    $("#login-regis").validate({
        onkeyup : false,
        submitHandler : function(form) {
            if (flag != 0) { //验证通过 可开始调登录注册接口
                if (operaType == "login") { // 2.新版登录接口
                    $(form).find("#callbackurl").val(window.location.host);
                    form.submit();
                } else { // 开始调注册接口
                    var thisHerf = window.location.href;
                    var params = {
                        loginId : $(".account").val(),
                        password : $(".passw").val(),
                        "captcha" : $("#captcha").val(),
                        "source" : thisHerf.indexOf("test-register.html") != -1 ? "test" : null
                    };

                    checkcount();
                    if (flag) {
                        requestAjax("post", "/registerV3", params, function(data) {
                            if (data.status == 200) { //注册成功
                                location.assign('/register/more.html'); // 注册成功后跳转企业选择页面
                            } else { //注册失败
                                var img_src = passportUrl + '/captcha/image?t=' + Math.random();
                                $(".clickPic").removeAttr('src').attr("src", img_src);
                                $('.shibai').html(data.data.ERROR_MSG[0].messages[0]);
                                $("#login-regis li:eq(2) p").text(data.data.ERROR_MSG[0].messages[0]).show();
                            }
                        })
                    }

                }
            }
        },
        rules : {
            loginId : {
                required : true
            },
            password : {
                required : true,
                rangelength : [ 6, 20 ]
            },
            captcha : {
                required : true
            }
        },
        messages : {
            loginId : {
                required : "请输入常用手机号"
            },
            password : {
                required : "请输入密码",
                rangelength : "密码长度不正确"
            },
            /*checkPic: {
                required: "请输入图片验证码"
            }*/
            captcha : {
                required : "请输入短信验证码"
            }
        },
        errorPlacement : function(error, element) {
            element.siblings(".error_mess").empty();
            error.appendTo(element.siblings(".error_mess"));
        }
    });



    // 点击登录/注册按钮开始调接口
    $("#loginBtn,#regisBtn").on("click", function() {
        $("#login-regis").submit();
    })

    //检测(手机/邮箱)是否已经注册 未注册则显示立即注册按钮
    $(".account").blur(function() {
        checkcount();
    });

    function checkcount() {
        loginCheck.account($(".account"));
        if ($(".account").attr("operaType") != "login") { //登录不需要验证
            if (flag != 0 && ($.trim($(".account").val()) != "")) { //先判断是否为正确格式 0 ==不是 1==是
                var params = {
                    loginId : $(".account").val(),
                    loginIdType : "register"
                };
                requestAjax("post", passportUrl + "/check/loginId", params, function(data) {
                    if (data.status != 200) { //已注册
                        flag = 0; //账号已注册 不鞥呢通过验证
                        $(".account").siblings(".error_mess").html("您填写的账号已存在");
                        $(".account").siblings(".last").removeClass("uhide");
                    } else {
                        flag = 1;
                        $(".account").siblings(".error_mess").html("");
                        $(".account").siblings(".last").addClass("uhide");
                    }
                })
            }
        }
    }

    function requestAjax(type, url, data, callback) {
        $.ajax({
            type : type,
            url : url,
            data : data,
            dataType : "json",
            success : function(data) {
                callback(data);
            }
        });
    }

    //极验
    var handlerPopup = function(captchaObj) {
        // 成功的回调
        captchaObj.onSuccess(function() {
            var validate = captchaObj.getValidate();
            $.ajax({
                url : "/geet/validate.html", // 进行二次验证
                type : "post",
                dataType : "json",
                data : {
                    username : $('#username1').val(),
                    password : $('#password1').val(),
                    geetest_challenge : validate.geetest_challenge,
                    geetest_validate : validate.geetest_validate,
                    geetest_seccode : validate.geetest_seccode
                },
                success : function(data) {
                    if (data && (data.status === "success")) {
                        var seconds = 60,
                            _this = $("#short_but"),
                            phone = null,
                            timer = null;

                        $.ajax({
                            url : "/captcha/phone/send",
                            type : "post",
                            data : {
                                "phone" : $("#loginId").val()
                            },
                            success : function(data) {
                                if (data.status == "200") {
                                    clearInterval(timer);
                                    timer = setInterval(function() {
                                        seconds--;
                                        _this.addClass("short-send");
                                        if (seconds > 0) {
                                            _this.html(seconds + "秒后重发");
                                        } else {
                                            clearInterval(timer);
                                            _this.html("重新发送").removeClass("short-send");
                                        }
                                    }, 1000);

                                    _this.siblings(".error_mess").html("");

                                } else if (data.status == "500") {

                                    _this.siblings(".error_mess").text(data.msg);

                                }
                            }
                        })

                    }
                }
            });
        });
        captchaObj.onError(function () {
            $.ajax({
                url: "/captcha/phone/1/cntEvent",
                type: "post",
                dataType: "json",
                success: function (json) {

                }
            });
        });
        captchaObj.onFail(function () {
            $.ajax({
                url: "/captcha/phone/1/cntEvent",
                type: "post",
                dataType: "json",
                success: function (json) {

                }
            });
        });
        $("#short_but").click(function() {

            $.ajax({
                url: "/captcha/phone/0/cntEvent",
                type: "post",
                dataType: "json",
                success: function (json) {

                }
            });

            var $loginId=$("#loginId");

            if($loginId.val()==""){
                $(".account").siblings(".error_mess").html("请输入手机号");
                return;
            } else if (!/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test($loginId.val())) {
                $(".account").siblings(".error_mess").html("请输入正确格式的手机号");
                return;
            } else if ($loginId.val() == "" || $("#short_but").hasClass("short-send") || $(".loginSection form li:eq(0) p").text() == "您填写的账号已存在") {
                return;
            }
            captchaObj.show();
        });
        captchaObj.appendTo("#popup-captcha");
    };


    $.ajax({
        url : "/geet/register.html?t=" + (new Date()).getTime(),
        // 加随机数防止缓存
        type : "get",
        dataType : "json",
        success : function(data) {
            initGeetest({
                gt : data.gt,
                challenge : data.challenge,
                product : "popup",
                offline : !data.success
            },
                handlerPopup);
        }
    });
})