如何在.Net Core MVC中為動態表單開啟客戶端驗證
阿新 • • 發佈:2018-06-12
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"] }View Code<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調用頁面代碼:
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中為動態表單開啟客戶端驗證