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.