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.

巴特西

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

最新文章

热门文章