绑定表单jquery validate

html

<div class="Box">
    <div class="item">
        <div>商户名称 :花生米有限公司</div>
    </div>
    <form action="save" method="post" id="commentForm">
        <div class="item">
            <div class="title">开户行名称:</div>
            <div class="input"><input type="text" name="bank_name" placeholder="请填写开户行名称"></div>
            <input type="hidden" name="id" value="1">
        </div>
        <div class="item">
            <div class="title">开户行账号:</div>
            <div class="input"><input type="text" name="bank_sn" placeholder="请填写开户行账号"></div>
        </div>
        <div class="item">
            <div class="title">真实姓名:</div>
            <div class="input"><input type="text" name="truename" placeholder="真实姓名"></div>
        </div>
        <div class="item">
            <div class="title">图形验证码:</div>
            <div class="input"><input type="text" id="img_code" name="captcha" placeholder="图形验证码">
                <span class="img">
                    <img src="{:captcha_src()}" onclick="this.src ='{:captcha_src()}'+ '?v=' + Math.random()" alt=""
                         width="100px" height="30px">
                </span>
                <span id="captcha">看不清楚 ? 换一张</span>
            </div>
        </div>
        <div class="item">
            <div class="title">短信验证码:</div>
            <div class="input"><input type="text" id="phone_code" name="phone_code" placeholder="短信验证码"> <span
                        class="btn" id="btn">发送验证码</span>
            </div>
        </div>
        <div class="item">
            <div class="title"></div>
            <div class="input"><input class="btn" type="submit" value="保存"></div>
        </div>
    </form>
</div>

css 样式

 <style>
        .Box {
            min-width: 1000px;
            width: 80%;
            margin: 50px auto;
        }
        .item {
            height: 50px;
            line-height: 50px;
            display: flex;
            border: 1px solid #ccc;
        }
        .title {
            width: 10%;
            text-align: right;
            border-right: 1px solid #ccc;
            padding-right: 20px;
        }
        input {margin-left: 10px;height: 30px;}
        .btn {
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            display: inline-block;
            padding: 0px 5px;
            border-right: 1px solid #ccc;
            background-color: #f98b2d;
            border-radius: 5px;
        }
        .img {
            display: inline-block;
            width: 100px;
            height: 30px;
            position: relative;
            top: 10px;
        }
    </style>

逻辑

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script>
    $(function () {
        $('#captcha').click(function () {
            $('img').attr('src', '{:captcha_src()}' + '?v=' + Math.random())
        });

        $('#btn').click(function () {
            var captcha = $('#img_code').val();
            var phone = 13673417827;
            if (captcha == '') {
                alert('请输入图片验证码');
                return false;
            }
            $.ajax({
                url: 'http://www.tp6.com/week/bankbind/code',
                data: {captcha, phone},
                dataType: 'json',
                success:res=>{
                    console.log(res);
                    if (res.code == 200) {
                        alert('验证码已发送 请注意查收');
                        var time = 60
                        var timers = setInterval(function () {
                            time--;
                            if (time > 0) {
                                $('#btn').html(time + "秒");
                                $('#btn').prop("disabled", true)
                            } else {
                                $('#btn').html("发送验证码");
                                $('#btn').prop("disabled", false)
                                clearInterval(timers)
                            }
                        }, 1000)
                    } else {
                        alert(res.msg);
                    }
                }
            });
        })

        $("#commentForm").validate({
            rules: {
                bank_name: "required",
                bank_sn: {
                    required: true,
                    minlength: 20,
                    number: true
                },
                truename: {
                    required: true,
                    minlength: 2,
                },
                captcha: {
                    required: true,
                    minlength: 4,
                },
                phone_code: {
                    required: true,
                    minlength: 4,
                    number: true
                },
            },
            submitHandler: function (form) {
                // 表单提交地址
                let url = $(form).attr('action');
                // 表单序列化   _token=aaa&name=fewflew
                let data = $(form).serialize();
                // jquery post提交
                $.post(url,data).then(res=>{
                    console.log(res);
                    if( res.code== 200){
                       alert(res.msg);
                       location.href = "/week/txian/create";
                    }else{
                        alert(res.msg);
                    }
                })
            }
        });
    })
</script>