1. 程式人生 > >如何在.Net Core MVC中為動態表單開啟客戶端驗證

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

mic 開啟 hide throw com 選擇 pen addclass title

非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

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