如何在.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