精品人人槡人妻人人槡,无码午夜国产视频,日韩精品无码有码视频,国产成人精品日本亚洲成熟

<var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

  • <rp id="lf53i"></rp>
    <var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

    <video id="lf53i"></video>
    <b id="lf53i"><acronym id="lf53i"></acronym></b>

      1. 0712-2888027 189-8648-0214
        微信公眾號(hào)

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

        當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > JQuery Validate驗(yàn)證插件的使用代碼示例

        JQuery Validate驗(yàn)證插件的使用代碼示例

        時(shí)間:2017-11-10來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 810次
        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ò) 可開(kāi)始調(diào)登錄注冊(cè)接口
                        if (operaType == "login") { // 2.新版登錄接口
                            $(form).find("#callbackurl").val(window.location.host);
                            form.submit();
                        } else { // 開(kāi)始調(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è)按鈕開(kāi)始調(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);
                }
            });
        })
        熱門關(guān)鍵詞: JQuery Validate 驗(yàn)證插件

        您可能感興趣的相關(guān)文章:

        欄目列表
        推薦內(nèi)容
        熱點(diǎn)內(nèi)容
        展開(kāi)