非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>
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(); ???????????} ???????}); ???}
$.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); ???}})
如何在.Net Core MVC中为动态表单开启客户端验证
原文地址:https://www.cnblogs.com/ceci/p/9172616.html