jq validate多表单提交校验

最新推荐文章于 2024-03-14 07:00:00 发布
哇偶哇偶Z
最新推荐文章于 2024-03-14 07:00:00 发布
阅读量1k
点赞数
本文链接：https://blog.csdn.net/ddwddw4/article/details/80103962
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购计划添加</title>
    <link rel="stylesheet" href="css/jedate.css">
</head>
<style>
    *[hidefocus], input, textarea, a {
        outline: none;
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
        padding: 0;
        margin: 0;
    }

    fieldset, img, html, body, iframe {
        border: 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    li {
        list-style: none;
    }

    i {
        font-style: normal;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
    }

    caption, th {
        font-weight: normal;
        font-style: normal;
        text-align: left;
    }

    em, strong {
        font-weight: bold;
        font-style: normal;
    }

    body, textarea, select, input, pre {
        font-family: arial, microsoft yahei, helvetica, sans-serif;
        font-size: 14px;
        color: #555;
    }

    body {
        background: #f8f8f8;
        line-height: 1.5em;
        -webkit-text-size-adjust: none;
    }

    a, button {
        cursor: pointer;
    }

    textarea {
        resize: none;
        overflow: auto;
    }

    pre {
        white-space: pre-wrap;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    input, select {
        border: 1px solid #ccc;
        border-radius: 2px;
        padding: 2px 0;
        text-align: center;
    }

    select {
        padding: 2px 8px;
    }

    .box {
        width: 1524px;
        overflow: hidden;
        color: #555;
        margin-left: 50px;
    }

    .buy-title {
        font-size: 24px;
        padding: 10px 0 30px;
    }

    .content {
        overflow: hidden;
        box-sizing: border-box;
    }

    .leftbox {
        width: 30%;
        float: left;
        box-sizing: border-box;
        padding-right: 70px;
    }

    .left {
        padding: 30px 0;
        border-bottom: 1px solid #ccc;
    }

    /*.left:last-child{*/
    /*border:none;*/
    /*}*/
    .rightbox {
        width: 70%;
        float: left;
        border-left: 1px solid #aaa;
        box-sizing: border-box;
        padding-left: 100px;
    }

    .right {
        padding: 30px 0;
        border-bottom: 1px solid #ccc;
    }

    /*.right:last-child{*/
    /*border:none;*/
    /*}*/
    .left > p {
        width: 100%;
        padding: 12px 0;
        display: flex;
        align-items: center;
    }

    .left > p:nth-child(odd) {
        background: #eee;
    }

    .left > p span:first-child {
        width: 160px;
        text-align: left;
        display: inline-block;
    }

    .left > p span:last-child {
        display: block;
        width: 227px;
        word-wrap: break-word;
    }

    /*.left > p span:last-child {*/
    /*display: inline-block;*/
    /*}*/
    .left > p span i {
        display: block;
    }

    .right-title {
        overflow: hidden;
        padding-top: 42px;
    }

    .right-title p {
        float: left;
        width: 50%;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .right-title > p span:first-child {
        min-width: 200px;
        text-align: left;
        display: inline-block;
        margin-right: 20px;
    }

    .right-title > p span:last-child {
        display: block;
        width: 220px;
        word-wrap: break-word;
    }

    .right-title > p span i {
        display: block;
    }

    .brand {
        padding: 12px 0;
    }

    .brand, .set, .color > div, .check, .numbox, .detail > div {
        display: flex;
        align-items: center;
    }

    .brand > span, .set > span, .color > div > span, .check > span, .numbox > span, .detail > div > span {
        min-width: 160px;
        text-align: left;
        display: inline-block;
    }

    .brand > span > i, .set > span > i, .color > div > span > i, .check > span > i, .numbox > span > i, .detail > div > span > i {
        display: block;
    }

    .brand > select {
        min-width: 200px;
    }

    .check {
        padding: 12px 0;
    }

    .checkbox {
        position: relative;
        top: 2px;
        margin-right: 10px;
        cursor: pointer;
    }

    .info {
        padding: 12px 0;
        overflow: hidden;
        display: none;
    }

    .set {
        float: left;
        width: 50%;
    }

    .color {
        float: left;
        width: 50%;
    }

    .set span {
        width: 124px;
        float: left;
    }

    .set textarea {
        width: 300px;
        height: 100px;
        overflow-y: auto;
        border: 1px solid #ccc;
    }

    .color > div:first-child {
        padding-bottom: 56px;
    }

    .numbox {
        padding: 12px 0;
    }

    .numbox > span {
        width: 120px;
        text-align: left;
        display: inline-block;
    }

    .detail {
        padding: 12px 0;
        overflow: hidden;
    }

    .detail > div {
        width: 50%;
        float: left;
    }

    .detail > div > span:first-child {
        width: 120px;
        display: inline-block;
        text-align: left;
    }

    .sell-button {
        margin-top: 70px;
        width: 100%;
        text-align: center;
    }

    .sell-button a {
        color: white;
        background: #4d90fe;
        display: inline-block;
        border: 0;
        padding: 7px 20px;
        margin: 5px 0;
    }

    .sell-button a:last-child {
        margin-left: 100px;
        background: #ddd;
    }

    .btn-box {
        padding: 50px 0 20px;
        /*text-align: center;*/
    }

    .add {
        margin: 0 100px 0 300px;
        width: 70px;
        border: none;
        background: #4d90fe;
        color: #fff;
        height: 38px;
    }

    .delete {
        width: 70px;
        border: none;
        background: #4d90fe;
        color: #fff;
        height: 38px;
    }

    .error {
        color: red;
    }
    .addgoon {
        margin: 0 100px 0 300px;
        width: 80px;
        border: none;
        background: #4d90fe;
        color: #fff;
        height: 38px;
        padding: 10px;
    }
    .delete {
        width: 80px;
        border: none;
        background: #ccc;
        color: #666;
        height: 38px;
        padding: 10px;
    }
</style>
<body>
<!--<form action="" id="aa">-->
<div class="box">
    <h2 class="buy-title">采购计划添加</h2>
    <div class="content">
        <div class="leftbox">
            <div class="left">
                <p>
                    <span>
                        <i>需求单编号：</i>
                        <i>(requirement number)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>需求单名称：</i>
                        <i>(requirement name)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>品牌首字母：</i>
                        <i>(brand initials)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>品牌：</i>
                        <i>(brand)</i>
                    </span>
                    <span>XXXXXXXX1111111111111111saddddddddddasdasdasdasssssss</span>
                </p>
                <p>
                    <span>
                        <i>型号：</i>
                        <i>(model)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>版别：</i>
                        <i>(versions)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>配置：</i>
                        <i>(configuration)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>外观颜色：</i>
                        <i>(appearance color )</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>内饰颜色：</i>
                        <i>(car interior color)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>数量：</i>
                        <i>(amount)</i>
                    </span>
                    <span>XXXXXXXX</span>
                </p>
            </div>
        </div>
        <div class="rightbox">

            <div class="right-title">
                <p>
                    <span>
                        <i>采购计划编号：</i>
                        <i>(procurement plan number)</i>
                    </span>
                    <span class="buycode">XXXXXXXX</span>
                </p>
                <p>
                    <span>
                        <i>采购计划名称：</i>
                        <i>(procurement plan name)</i>
                    </span>
                    <input type="text" name="buyname">
                </p>
            </div>
            <form action="" id="rightVli0" class="rightVli">
                <div class="right"><input type="hidden" name="sid" value="46"><input type="hidden" name="bidc" value="0">
                    <div class="brand">
                    <span>
                        <i>品牌 型号 版别:</i>
                        <i>(brand model version)</i>
                    </span>
                        <select id="" name="bmv" class="selectchange">

                            <option value="80" selected="selected">本田 艾力绅 2016款 2.4L 自动 舒适版288</option>

                        </select>
                    </div>
                    <div class="check">
                        <input type="checkbox" class="checkbox">
                        <input type="hidden" name="adjust" value="">
                     <span>
                            <i>调剂（只有调剂后才可修改配置、颜色）</i>
                            <i>adjustment (config and color can be modified when you check adjustment)</i>
                     </span>
                    </div>
                    <div class="info">
                        <div class="set">
                        <span>
                            <i>配置：</i>
                            <i>(configuration)</i>
                        </span>
                            <textarea name="config" readonly="readonly">1</textarea>
                        </div>
                        <div class="color">
                            <div>
                             <span>
                            <i>外观颜色：</i>
                            <i>(appearance color)</i>
                            </span>
                                <input type="text" name="outcolor" class="out_color" value="1" readonly="readonly">
                            </div>
                            <div>
                             <span>
                            <i>内饰颜色：</i>
                            <i>(inner color)</i>
                        </span>
                                <input type="text" name="incolor" class="in_color" value="1" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="numbox">
                     <span>
                            <i>数量：</i>
                            <i>(amount)</i>
                        </span>
                        <input type="text" name="num" class="num" value="11111111111">
                    </div>
                    <div class="detail">
                        <div>
                         <span>
                            <i>供应方名称：</i>
                            <i>(supplier name)</i>
                        </span>
                            <input type="text" name="supplyname" value="阿发">
                        </div>
                        <div>
                         <span>
                            <i>车价：</i>
                            <i>(car price)</i>
                        </span>
                            <input type="text" name="totalprice" value="11.00">&nbsp;加币(CAD)
                        </div>
                    </div>
                    <div class="detail">
                        <div>
                         <span>
                            <i>货物运送地点：</i>
                            <i>(delivery location)</i>
                        </span>
                            <select id="" name="tostoreid">

                                <option value="12" selected="selected">asdf</option>

                                <option value="13">加拿大啊</option>

                            </select>
                        </div>
                    </div>
                    <div class="detail">
                        <div>
                         <span>
                            <i>约定入库时间：</i>
                            <i>(agreed storage time)</i>
                        </span>
                            <input class="datainp" name="appointtime" type="text" placeholder="请选择时间" readonly="readonly">
                        </div>
                        <div>
                         <span>
                            <i>付款时间：</i>
                            <i>(pay time)</i>
                        </span>
                            <input class="datainp" name="paytime" type="text" placeholder="请选择时间" value="2017-12-31">
                        </div>
                    </div>
                    <div class="detail">
                        <div>
                         <span>
                            <i>4S店杂费：</i>
                            <i>(4S shop charges)</i>
                        </span>
                            <input type="text" name="othercost" value="1.00">
                        </div><div>
                        <span>
                            <i>车辆保险：</i>
                            <i>(car insurance)</i>
                        </span>
                        <input type="text" name="insurance" value="2.00">
                    </div>
                    </div>
                    <div class="detail">
                        <div>
                        <span>
                            <i>消费税：</i>
                            <i>(consumption tax)</i>
                        </span>
                            <input type="text" name="expensetax" value="3.00">
                        </div>
                    </div>
                    <div class="detail">
                        <div>
                         <span>
                            <i>佣金1：</i>
                            <i>(commission1)</i>
                        </span>
                            <input type="text" name="cmsn1" value="4.00">
                        </div><div>
                         <span>
                            <i>佣金2：</i>
                            <i>(commission2)</i>
                        </span>
                        <input type="text" name="cmsn2" value="5.00">
                    </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>佣金3：</i>
                            <i>(commission3)</i>
                        </span>
                            <input type="text" name="cmsn3" value="6.00">
                        </div><div>
                         <span>
                            <i>佣金4：</i>
                            <i>(commission4)</i>
                        </span>
                        <input type="text" name="cmsn4" value="7.00">
                    </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>佣金5：</i>
                            <i>(commission5)</i>
                        </span>
                            <input type="text" name="cmsn5" value="8.00">
                        </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>其他费用1：</i>
                            <i>(other cost1)</i>
                        </span>
                            <input type="text" name="other1" value="9.00">
                        </div><div>
                         <span>
                            <i>其他费用2：</i>
                            <i>(other cost2)</i>
                        </span>
                        <input type="text" name="other2" value="10.00">
                    </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>其他费用3：</i>
                            <i>(other cost3)</i>
                        </span>
                            <input type="text" name="other3" value="11.00">
                        </div><div>
                         <span>
                            <i>其他费用4：</i>
                            <i>(other cost4)</i>
                        </span>
                        <input type="text" name="other4" value="12.00">
                    </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>其他费用5：</i>
                            <i>(other cost5)</i>
                        </span>
                            <input type="text" name="other5" value="13.00">
                        </div>
                    </div><div class="detail">
                        <div>
                         <span>
                            <i>运输费用：</i>
                            <i>(transport cost)</i>
                        </span>
                            <input type="text" name="transcost" value="14.00">
                        </div><div>
                         <span>
                            <i>运输方名称：</i>
                            <i>(transport name)</i>
                        </span>
                        <input type="text" name="transname" value="15啊">
                    </div>
                    </div>
                    <div class="btn-box">
                        <a class="addgoon">
                            <i>继续添加</i>
                            <i>add</i>
                        </a>

                        <a class="delete">
                            <i>删除</i>
                            <i>delete</i>
                        </a></div></div>
            </form>
        </div>

        <!--<p id='submit2'>验证</p>-->
    </div>
    <div class="sell-button">
        <a href="javascript:;" id="submit2">
            提交(submit)
        </a>
        <a href="#">取消(cancel)</a>
    </div>
    <input type="submit" value="ss" id='submit' >

</div>
<!--</form>-->
<input onclick="testShow(this)" readonly placeholder="请选择时间">
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.jedate.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
    function testShow(elem){
        $.jeDate(elem,{
            format: "YYYY-MM-DD",
            isTime: false,
            isClear: false,
            maxDate: $.nowDate({DD:"0"})
        });
    }
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var day=date.getDate();
    if(month<10){
        month="0"+month;
    }
    if(day<10){
        day="0"+day;
    }
console.log(year+"-"+month+"-"+day)
    $(".datainp").jeDate({
        format: "YYYY-MM-DD",
        isTime: false,
        isClear: false,
        maxDate: year+"-"+month+"-"+day
//        position:[205,768]
    });
    $(document).delegate('.checkbox', 'click', function () {
        if ($(this).prop('checked')) {
            $(this).parent().siblings('.info').show();
        } else {
            $(this).parent().siblings('.info').find('textarea,input').val("");
            $(this).parent().siblings('.info').hide();
        }
    });
    $(document).delegate('.addgoon', 'click', function () {
        var parent = $(this).parent().parent().parent().clone();
        parent.find('label').remove();
        parent.find('input,textarea').css("color", "#555").val("");
        parent.find('.checkbox').prop('checked', false);
        parent.find('.info').hide();
        parent.appendTo($('.rightbox'));
        var right = $(".rightVli");
        for (var i = 0; i < right.length; i++) {
            right.eq(i).prop("id", "rightVli" + i);
        }
        $(".datainp").jeDate({
            format: "YYYY-MM-DD",
            isTime: false,
            isClear: false,
            minDate: "2014-09-19 00:00:00"
        });
    });
    $(document).delegate('.delete', 'click', function () {
        $(this).parent().parent().parent().remove();
        var right = $(".rightVli");
        for (var i = 0; i < right.length; i++) {
            right.eq(i).prop("id", "rightVli" + i);
        }
    });
//    不为空
    jQuery.validator.addMethod("isnull", function(value, element) {
        return this.optional(element) || $.trim(value);
    }, "请输入合法字符");
//    配置
    jQuery.validator.addMethod("isconfig", function(value, element) {
        return this.optional(element) || $.trim(value).length<500;
    }, "最多输入500位字符");
//    外观配置
    jQuery.validator.addMethod("isoutlook", function(value, element) {
        return this.optional(element) || $.trim(value).length<50;
    }, "最多输入50位字符");
//    数量
    jQuery.validator.addMethod("isnum", function(value, element) {
      return this.optional(element) || /^[1-9][0-9]*$/.test(value);
    }, "请填写大于0的整数");
//    车价
    jQuery.validator.addMethod("istotalprice", function(value, element) {
        return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value);
    }, "请填写正确的金额");
    function JqValidate(id) {
        return $(id).validate({
            rules: {
                config:{
                    required: true,
                    isconfig:true,
                    isnull:true
                },
                outcolor:{
                    required: true,
                    isoutlook: true,
                    isnull:true
                },
                incolor:{
                    required: true,
                    isoutlook: true,
                    isnull:true
                },
                num: {
                    required: true,
                    isnum: true,
                    maxlength:11
                },
                supplyname: {
                    required: true,
                    isoutlook: true,
                    isnull:true
                },
                totalprice: {
                    required: true,
                    maxlength: 11,
                    istotalprice:true
                },
                othercost: {
                    maxlength: 11,
                    istotalprice:true
                },
                insurance: {
                    maxlength: 11,
                    istotalprice:true
                },
                expensetax: {
                    maxlength: 11,
                    istotalprice:true
                },
                cmsn1: {
                    maxlength: 11,
                    istotalprice:true
                },
                cmsn2: {
                    maxlength: 11,
                    istotalprice:true
                },
                cmsn3: {
                    maxlength: 11,
                    istotalprice:true
                },
                cmsn4: {
                    maxlength: 11,
                    istotalprice:true
                },
                cmsn5: {
                    maxlength: 11,
                    istotalprice:true
                },
                other1: {
                    maxlength: 11,
                    istotalprice:true
                },
                other2: {
                    maxlength: 11,
                    istotalprice:true
                },
                other3: {
                    maxlength: 11,
                    istotalprice:true
                },
                other4: {
                    maxlength: 11,
                    istotalprice:true
                },
                other5: {
                    maxlength: 11,
                    istotalprice:true
                },
                transcost: {
                    maxlength: 11,
                    istotalprice:true
                },
                transname: {
                    maxlength: 50,
                    isnull:true,
                    isoutlook: true,
                }
            },
            messages: {
                config:{
                    required: "请输入配置",
                    maxlength: "最多输入500位字符"
                },
                outcolor:{
                    required: "请输入外观颜色",
                    maxlength: "最多输入50位字符"
                },
                incolor:{
                    required: "请输入内饰颜色",
                    maxlength: "最多输入50位字符"
                },
                num: {
                    required: "请输入数量",
                    maxlength: "最多输入11位数字"
                },
                supplyname: {
                    required: "请输入供应商",
                    maxlength: "最多输入50位字符"
                },
                totalprice: {
                    required: "请输入车价",
                    maxlength: "最多输入11位数字"
                },
                transname: {
                    maxlength:"最多输入50位字符"
                }
            }
        })
    }
    $("#submit2").click(function () {
        var val=$('.right-title').find("input[name='buyname']").val();
        if($.trim(val)==""){
            alert("请输入采购计划名称");
            $('.right-title').find("input[name='buyname']").focus();
            return false;
        }
        else if(val.length>100){
            alert("最多输入100位字符");
            $('.right-title').find("input[name='buyname']").focus();
            return false;
        }
        var k = 0;
        var right = $('.rightVli');
        for (var i = 0; i < right.length; i++) {
            if (JqValidate("#rightVli" + i).form()) {
                k++;
                if (k == right.length) {
                    var ss="";
                    $.each(right,function(){
                        for(var j=0;j<$(this).find("div>div input").length;j++){
                            ss=ss+$(this).find("div>div input").eq(j).attr('name')+"="+ $.trim($(this).find("div>div input").eq(j).val())+"&";
                        }
                        ss=ss+"config="+$.trim($(this).find("textarea[name='config']").val())+"&bmv="+$(this).find("select[name='bmv']").val()+"&tostoreid="+$(this).find("select[name='tostoreid']").val()+"&";
                    });
                    ss=ss+"buycode="+$('.buycode').html()+"&buyname="+$.trim($('.right-title').find("input[name='buyname']").val());
                    console.log(ss);
                    $.ajax({
                        url: '',
                        data: ss,
                        type: 'get',
                        datatype: 'json',
                        success: function () {
                            alert("提交成功");
                        }
                    });
                }
            }
        }
    });
</script>
</html>