jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語(yǔ)作為錯(cuò)誤信息，且已翻譯成其他 37 種語(yǔ)言。

以下為JQuery Validate驗(yàn)證插件在實(shí)際中項(xiàng)目運(yùn)用中使用的代碼示例：

表單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="請(qǐng)輸入常用手機(jī)號(hào)">
            <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="請(qǐng)輸入密碼">
            <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="請(qǐng)輸入短信驗(yàn)證碼" value="">
            <a href="javascript:;" id="short_but">發(fā)送驗(yàn)證碼</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">同意并注冊(cè)</a></div>
</form>

JQuery代碼：

$(function() {
    var loginCheck = {},
        flag = 1; //flag==0則驗(yàn)證不通過(guò)
    var regTel = /^0?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/; //手機(jī)
    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("請(qǐng)輸入正確格式的手機(jī)號(hào)");
        } else {
            flag = 1;
            obj.siblings(".error_mess").html("");
        }
    }

    // 點(diǎn)擊眼睛圖片顯示密碼 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();
            }
        }
    })
    // 登錄注冊(cè)提交前校驗(yàn)
    $("#login-regis").validate({
        onkeyup : false,
        submitHandler : function(form) {
            if (flag != 0) { //驗(yàn)證通過(guò) 可開始調(diào)登錄注冊(cè)接口
                if (operaType == "login") { // 2.新版登錄接口
                    $(form).find("#callbackurl").val(window.location.host);
                    form.submit();
                } else { // 開始調(diào)注冊(cè)接口
                    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) { //注冊(cè)成功
                                location.assign('/register/more.html'); // 注冊(cè)成功后跳轉(zhuǎn)企業(yè)選擇頁(yè)面
                            } else { //注冊(cè)失敗
                                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 : "請(qǐng)輸入常用手機(jī)號(hào)"
            },
            password : {
                required : "請(qǐng)輸入密碼",
                rangelength : "密碼長(zhǎng)度不正確"
            },
            /*checkPic: {
                required: "請(qǐng)輸入圖片驗(yàn)證碼"
            }*/
            captcha : {
                required : "請(qǐng)輸入短信驗(yàn)證碼"
            }
        },
        errorPlacement : function(error, element) {
            element.siblings(".error_mess").empty();
            error.appendTo(element.siblings(".error_mess"));
        }
    });



    // 點(diǎn)擊登錄/注冊(cè)按鈕開始調(diào)接口
    $("#loginBtn,#regisBtn").on("click", function() {
        $("#login-regis").submit();
    })

    //檢測(cè)(手機(jī)/郵箱)是否已經(jīng)注冊(cè) 未注冊(cè)則顯示立即注冊(cè)按鈕
    $(".account").blur(function() {
        checkcount();
    });

    function checkcount() {
        loginCheck.account($(".account"));
        if ($(".account").attr("operaType") != "login") { //登錄不需要驗(yàn)證
            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) { //已注冊(cè)
                        flag = 0; //賬號(hào)已注冊(cè) 不鞥呢通過(guò)驗(yàn)證
                        $(".account").siblings(".error_mess").html("您填寫的賬號(hào)已存在");
                        $(".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);
            }
        });
    }

    //極驗(yàn)
    var handlerPopup = function(captchaObj) {
        // 成功的回調(diào)
        captchaObj.onSuccess(function() {
            var validate = captchaObj.getValidate();
            $.ajax({
                url : "/geet/validate.html", // 進(jìn)行二次驗(yàn)證
                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 + "秒后重發(fā)");
                                        } else {
                                            clearInterval(timer);
                                            _this.html("重新發(fā)送").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("請(qǐng)輸入手機(jī)號(hào)");
                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("請(qǐng)輸入正確格式的手機(jī)號(hào)");
                return;
            } else if ($loginId.val() == "" || $("#short_but").hasClass("short-send") || $(".loginSection form li:eq(0) p").text() == "您填寫的賬號(hào)已存在") {
                return;
            }
            captchaObj.show();
        });
        captchaObj.appendTo("#popup-captcha");
    };


    $.ajax({
        url : "/geet/register.html?t=" + (new Date()).getTime(),
        // 加隨機(jī)數(shù)防止緩存
        type : "get",
        dataType : "json",
        success : function(data) {
            initGeetest({
                gt : data.gt,
                challenge : data.challenge,
                product : "popup",
                offline : !data.success
            },
                handlerPopup);
        }
    });
})