jQuery html5Validate基於HTML5表單 異步服務器端驗證

1. HTML5 自帶的Validate 很漂亮,很好用, 但是一定要在form里用submit按鈕,才生效

        <form id="frmInfo" action="/product/" method="post" >

            <div class="input-box"><label for="">身份證號碼：</label><input type="text" name="BorrowerIDCard" required placeholder="請輸入您的身份證號碼" pattern="^\d{6}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$" oninput="setCustomValidity('');"></div>
           
            <div class="input-box"><label for="">接收款項的銀行賬號：</label><input type="number" name="BorrowerBankAccount" required placeholder="請輸入您的銀行賬戶" oninvalid="setCustomValidity('請輸入您的銀行賬戶');" oninput="setCustomValidity('');"></div>
            <div class="input-box"><label for="">經辦人編號：</label><input type="text" name="StaffCode" required maxlength="8" placeholder="請輸入經辦人工號" onblur="checkStaffCode($(this).val())"></div>
            <div class="input-box"><label for="">手機號碼：</label><input type="text" name="Mobile" required pattern="^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$" placeholder="請輸入您的手機號碼" maxlength="11" oninvalid="setCustomValidity('請輸入您的手機號碼');" oninput="setCustomValidity('');"></div>
            <div class="input-box code">
                <label for="">驗證碼：</label><input type="text" name="captcha" id="captcha" required pattern="^\d{4}$" maxlength="4" placeholder="請輸入驗證碼" oninvalid="setCustomValidity('請輸入正確的驗證碼');" oninput="setCustomValidity('');" >
                <span>
                    <img id="cc_image" src="/product/ValidateCode/Contract" alt="點擊切換驗證碼" style="cursor: pointer;" onclick="this.src=this.src+'?';">
                </span>
            </div>
            <input type="button" class="break" value="返回"><input type="submit" class="sub" value="提交">
        </form>

但是有個問題,驗證碼要服務器端驗證,經辦人編號也要服務器端驗證.如果我用button,就不能用自帶的Validate, 用Submit按鈕, 因為是異步到服務器驗證,截獲不了.

2. 解決方法1: jquery.validate.js 老古董,但穩定, BUT 樣式很難看,和HTML5 自帶的Validate 不搭

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>

        $(function () {
            $("#captchaform").validate({
                rules: {
                    captcha: {
                        required: true,
                        remote: "/product/getCCInput"
                    }
                },
                messages: { captcha: "Correct captcha is required. Click the captcha to generate a new one" },
                submitHandler: function () {
                    alert("Correct captcha!");
                },
                success: function (label) {
                    label.addClass("valid").text("Valid captcha!")
                },
                onkeyup: false
            });
        });

3. 用這個 https://www.zhangxinxu.com/study/201212/html5validate-example-regist.html

 <script src="~/js/jquery-html5Validate.js"></script>

   $('#captchaform').html5Validate(function () {
        var self = this;

        $.ajax({
            url: "/product/getCCInput",
            data: "captcha=" + $("#captcha").val(),
            success: function (result) {
                console.log("result:" + result);
                console.log(result == false)
                if (result == "false")
                    console.log("驗證碼錯誤");
                else { 
                    $.ajax({
                        url: "/product/getStaffCode/" + $("#StaffCode").val(),
                        success: function (data) {

                            if (data.isValid) {
                                self.submit();
                            }

                            else {
                                console.log('經辦人編號不正確,staffCode=' + $("#StaffCode").val());

                            }
                        }

                    });

                }
                    
            }
        });    
        

    });