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());

                            }
                        }

                    });

                }
                    
            }
        });    
        

    });