如何在.Net Core MVC中为动态表单开启客户端验证

水深无声 2021-09-29 06:22 113阅读 0赞

非Core中的请参照：

[MVC的验证 jquery.validate.unobtrusive][MVC_ jquery.validate.unobtrusive]

[mvc验证jquery.unobtrusive-ajax][mvc_jquery.unobtrusive-ajax]

参照[向动态表单增加验证][Link 1]

页面引入相关JS：

## 向动态表单添加客户端验证 ##

AddInfo.cshtml内容如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

@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>

Index.cshtml调用页面代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

`$.validator.unobtrusive.parse()` 方法采用 jQuery 选择器作为它的一个参数。 此方法指示 jQuery 非介入式验证分析该选择器内表单的 `data-` 属性。 这些属性的值随后传递到 jQuery Validate 插件中，以便表单展示所需的客户端验证规则。

## 向动态控件添加客户端验证 ##

也可以在动态生成各个控件（比如 `<input/>` 和 `<select/>`）时，更新表单上的验证规则。 不能将用于这些元素的选择器直接传递到 `parse()` 方法，因为周围表单已进行分析并且不会更新。 应当先删除现有的验证数据，然后重新分析整个表单，如下所示：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$.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);
        }
    })

转载于:https://www.cnblogs.com/ceci/p/9172616.html

[MVC_ jquery.validate.unobtrusive]: https://www.cnblogs.com/Leo_wl/p/4886622.html
[mvc_jquery.unobtrusive-ajax]: https://www.cnblogs.com/Leo_wl/p/4886638.html
[Link 1]: https://docs.microsoft.com/zh-cn/aspnet/core/mvc/models/validation?view=aspnetcore-2.1
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20210726/896e094199fb485b8d55a01e0033b262.png