分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 01:59责任编辑:沈小雨关键词: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

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

原文地址:https://www.cnblogs.com/ceci/p/9172616.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved