JS form表单数据校验及失效情况下的解决方案

如下图,当执行提交操作之前,我们需要对序号,要求完成时间,责任人,措施内容四项进行非空,字符长度及输入内容的类型进行校验.

直接贴样式代码

<div class="wrapper animated fadeInRight">
    <form id="form" class="form-horizontal m">
        <div class="form-group">
            <label class="col-sm-3 control-label ">序号<font class="red"> *</font></label>
            <div class="col-sm-8">
                <input id="longEventId" col="LongEventId" type="hidden" class="form-control" />
                <input id="stepNo" name="stepNoName" col="StepNo" type="number" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">要求完成时间<font class="red"> *</font></label>
            <div class="col-sm-8">
                <input id="finishTime" name="finishTime" col="FinishTime" type="text" class="time-input form-control"
                    autocomplete="off" placeholder="要求完成时间" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">责任人<font class="red"> *</font></label>

            @*<input id="personLiableId" col="PersonLiableId" type="text" class="form-control" />*@
            @await Html.PartialAsync("/Areas/SystemManage/Shared/SystemUserIdSelect.cshtml",
            new ViewDataDictionary(this.ViewData) { { "Content", "8" }, { "IsMultiple", "false" } })
            <input id="userId" name="userIdName" col="PersonLiableId" type="hidden" class="form-control" />
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">改善对策</label>
            <div class="col-sm-8">
                <textarea id="basicReason" col="BasicReason" class="form-control" style="height:60px"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">措施内容<font class="red"> *</font></label>
            <div class="col-sm-8">
                <textarea id="stepContent" name="stepContentName" col="StepContent" class="form-control"
                    style="height:60px"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">图片</label>
            <div class="col-sm-8">
                <div id="stepPic" class="img-box"></div>
            </div>
        </div>
    </form>
</div>

下面为文本输入检测代码

<script type="text/javascript">
    $(function () {
        laydate.render({
            elem: '#finishTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss'
        });

    $('#form').validate({
        rules: {
            stepNoName: {required: true},
            finishTime: {required: true},
            userId:{required: true},
            stepContentName: {required: true, maxlength: 300  }
            }
        });
    });

    function saveForm(index) {
        var userI = $("#userId").val();
        if (userI == "" || userI == null || userI == undefined) {
            ys.msgError("请选择责任人！");
                return;
            }

        if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({Id: id });
            postData.StepPic = $("#stepPic").imageUpload("getImageUrl");
            ys.ajax({
                url: '@Url.Content("~/LongEventManage/LongMeasuresManage/SaveFormJson")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        parent.searchGrid();
                        parent.layer.close(index);
                    }else {
                        ys.msgError(obj.Message);
                      }
                    }
                });
            }
        }

</script>

先看下当点击提交的时候的效果图:

当我们点击提交时,序号,要求完成时间,措施内容都提示是必填字段.

因此当提交时,这个表单验证是不会通过的,也就不会执行ajax请求调用提交方法.

if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({Id: id });
            postData.StepPic = $("#stepPic").imageUpload("getImageUrl");
            ys.ajax({
                url: '@Url.Content("~/LongEventManage/LongMeasuresManage/SaveFormJson")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        parent.searchGrid();
                        parent.layer.close(index);
                    }else {
                        ys.msgError(obj.Message);
                      }
                    }
                });
            }
        }

咱们接着往下实验,如果此时我们输入了措施内容,但是字符大于规定的300长度时,

stepContentName: {required: true, maxlength: 300 }

关于rules的key,其实指向的<input />中的name,之前我选择的是id,但是却没有生效,必须指向他的name名称.

细心的小伙伴,有没有发现,我的完成时间,为什么没有用name,而是还用的id名称?

<input id="stepNo" name="stepNoName" col="StepNo" type="number" class="form-control" />

<input id="finishTime" name="finishTimeName" col="FinishTime" type="text" class="time-input form-control" autocomplete="off" placeholder="要求完成时间" />

 $('#form').validate({
        rules: {
            stepNoName: {required: true},
            finishTime: {required: true},
            userId:{required: true},
            stepContentName: {required: true, maxlength: 300  }
            }
        });
    });

因为上面的<script>代码中,我使用了layUI框架对时间选择器的修饰导致name没有生效.

laydate.render({
            elem: '#finishTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss'
        });

其实我们从F12也可以看出,完成时间input框他的name也是finishTime.所以还是用的name作为Key.