如何在.Net Core MVC中爲動態表單開啓客戶端驗證

非Core中的請參照：

MVC的驗證 jquery.validate.unobtrusive

mvc驗證jquery.unobtrusive-ajax

 

參照向動態表單增長驗證

 

頁面引入相關JS：

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.js"></script>

向動態表單添加客戶端驗證

AddInfo.cshtml內容以下：

@model BasicFramework.Service.Implementation.Company_AddInfoRQ
@{
    Layout = "~/Views/Shared/_LayoutModal.cshtml";
}

@section modalName{
    @L["Add Info"]
}

<form asp-action="AddInfo" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#Modal"
    data-ajax-success="reLoadModal" data-ajax-method="Post" class="form-horizontal">
    <div class="toolbar">
        @Html.Action("Index", "Toolbar")
    </div>
    <div asp-validation-summary="@ValidationSummary.All" style="color:red" id="validation_day" class="form-group">
        <span style="color:blue">This is my message</span>
    </div>
    <div class="form-group">
        <label asp-for="Code" class="control-label col-md-2"></label>
        <div class="col-md-10">
            <input asp-for="Code" class="form-control required" />
            <span asp-validation-for="Code" style="color:red"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="Name" class="control-label col-md-2" style="color:blue"></label>
        <div class="col-md-10">
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" style="color:red"></span>
        </div>
    </div>

    <div class="modal-footer">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

View Code

 

Index.cshtml調用頁面代碼：

    function Add() {
        $.get({
            url: "/Company/AddInfo",
            dataType: "html",
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + ": Couldn't add form. " + errorThrown);
            },
            success: function (r) {
                $("#Modal").html(r);
                //$("#Modal").find(".modal-dialog").addClass("modal-full");
                var form = $("#Modal form");
                //form.removeData("validator"); /* added by the raw jquery.validate plugin */
                //form.removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/;
                $.validator.unobtrusive.parse(form);
                $("#Modal").modal();
            }
        });
    }

View Code

$.validator.unobtrusive.parse() 方法採用 jQuery 選擇器做爲它的一個參數。 此方法指示 jQuery 非介入式驗證分析該選擇器內表單的 data- 屬性。 這些屬性的值隨後傳遞到 jQuery Validate 插件中，以便表單展現所需的客戶端驗證規則。

 

向動態控件添加客戶端驗證

也能夠在動態生成各個控件（好比 <input/> 和 <select/>）時，更新表單上的驗證規則。 不能將用於這些元素的選擇器直接傳遞到 parse() 方法，由於周圍表單已進行分析而且不會更新。 應當先刪除現有的驗證數據，而後從新分析整個表單，以下所示：

$.get({
    url: "https://url/that/returns/a/control",
    dataType: "html",
    error: function(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ": Couldn't add control. " + errorThrown);
    },
    success: function(newInputHTML) {
        var form = document.getElementById("my-form");
        form.insertAdjacentHTML("beforeend", newInputHTML);
        $(form).removeData("validator")    // Added by jQuery Validate
               .removeData("unobtrusiveValidation");   // Added by jQuery Unobtrusive Validation
        $.validator.unobtrusive.parse(form);
    }
})

View Code