layui 自定义表单验证 以及提交表单

Posted 2020-11-19 jwlfpzj

 订购数量
</span>
    <span style="color: red">*</span>：
                   <input type="text" required lay-verify="required|number|isManzu"
                          id="proOrderNum" name="proOrderNum" class="input" value="1">
                   <span class="span-color-1">

<button lay-submit lay-filter="go"
        class="layui-btn layui-btn-radius layui-btn-normal">立即购买
</button>

layui.use(‘form‘, function () {
    var form = layui.form;
    var refalg = true;
    form.verify({
        isManzu: function (value, item) {
            if ($("#proNum").val() - value < 0) { // 不满足库存
                layer.msg("订购数量不能大于库存数量！");
                refalg = false;
            }
            // 后台验证，是否满足额度s
            var salePrice = $("#salePrice").val();
            var url = "/user/serproduct/getResQuotaList";
            var data = {resType: 103, salePrice: salePrice, proOrderNum: value};
            $.get(url, data, function (ev) {
                if (ev.code == 500) {
                    layer.msg(ev.msg);
                    refalg = false;
                }
            }, ‘json‘);
            // 后台验证，是否满足额度e
        }


    });
    form.on(‘submit(go)‘, function (data) {
        // console.log(data.elem);//被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form);//被执行提交的form对象，一般在存在form标签时才会返回
        // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}

        //发送ajax

        return refalg; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});
-------------------------

<input type="button" class="layui-btn layui-btn-warm  layui-btn-sm"
       onclick="evaluateInfo(${it.id?c},3)"
       value="服务完成">

function evaluateInfo(id, orderState) {
    layui.use(‘layer‘, function () {
        var layer = layui.layer;
        //iframe层
        layer.open({
            type: 2,
            title: ‘服务完成‘,
            shadeClose: true,
            shade: 0.8,
            area: [‘600px‘, ‘400px‘],
            content: ‘/user/serproOrder/evaluateInfo?id=‘ + id + ‘&orderState=‘ + orderState //iframe的url
        });
    });
}

<form id="evaluateInfoForm" class="layui-form" action="#" method="get">
    <div class="attestation-info">
        <label class="layui-form-label">评分<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input name="score" type="text" placeholder="1-100分"
                   value="" required lay-verify="required|number"
                   autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">评价</label>
        <div class="layui-input-block">

            <textarea name="evaluate" placeholder="请输入评价内容" class="layui-textarea"></textarea>

        </div>
        <input type="hidden" name="id"
               value="${id?c}"
               autocomplete="off" class="layui-input">
        <input type="hidden" name="orderState"
               value="${orderState}"
               autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <div class="layui-input-block">

                <button lay-submit lay-filter="go"
                        class="layui-btn  layui-btn-normal ">提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>

layui.use(‘form‘, function () {
    var form = layui.form;

    // 这个是在iframe里面的js代码
    var frameindex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    form.on(‘submit(go)‘, function (data) {
        // console.log(data.elem);//被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form);//被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
        var index = layer.load(1, {
            shade: [0.1, ‘#fff‘] //0.1透明度的白色背景
        });
        var url = ‘/user/serproOrder/changeProOrderState‘;
        $.get(url, data.field, function (ev) {
            if (ev.code == 200) {
                layer.msg(ev.msg);
                parent.location.href = "/user/serproOrder/getServiceProductOrderListV";
            } else {
                layer.close(index);
                layer.msg(ev.msg);
            }
        }, ‘json‘)
        //发送ajax
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

})