标记帮助程序将生成以下source html。请注意，HTML 输出中的 data- 属性与 ReleaseDate 属性的验证特性相对应。下面的 data-val-required 属性包含在用户未填写发行日期字段时将显示的错误消息。jQuery 非介入式验证将此值传递给 jQuery Validate required() 方法，该方法随后在随附的 <span> 元素中显示该错误消息。
<form action="/Movies/Create" method="post"> <div> <h4>Movie</h4> <div></div> <div> <label for="ReleaseDate">ReleaseDate</label> <div> <input type="datetime" data-val="true" data-val-required="The ReleaseDate field is required." value="" /> <span data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span> </div> </div> </div> </form>
2.4 动态表单添加验证
在创建动态表单后，需要立即对其进行分析。 例如，下面的代码展示如何对通过 AJAX 添加的表单设置客户端验证。
$.get({ url: "https://url/that/returns/a/form", dataType: "html", error: function(jqXHR, textStatus, errorThrown) { alert(textStatus + ": Couldn't add form. " + errorThrown); }, success: function(newFormHTML) { //添加表单newFormHTML var container = document.getElementById("form-container"); container.insertAdjacentHTML("beforeend", newFormHTML); //验证第一个表单 var forms = container.getElementsByTagName("form"); var newForm = forms[forms.length - 1]; //分析表单的 data- 属性 $.validator.unobtrusive.parse(newForm); } })
$.validator.unobtrusive.parse() 方法分析该选择器内表单的 data- 属性。当用户填写表单中的属性值提交时， 这些属性的值传递到 jQuery Validate 插件中，以便表单展示所需的客户端验证规则。
下面用一个简单示例来说明：
(1) 创建dynamic-form-validate.js文件，模拟动态生成表单，以及点击(#idbtn)按钮时验证：
var newFormHTML = "<form action=\"create\" method=\"post\">"; newFormHTML += "<div class=\"form-group\">"; newFormHTML += "<label asp-for=\"Title\" class=\"control- label\"></label>"; newFormHTML += "<input type=\"text\" data-val=\"true\" data-val-required=\"The Title field is required.\" id = \"Title\" name= \"Title\">"; newFormHTML += "<span class=\"text- danger field- validation - valid\" data-valmsg-for=\"Title\" data-valmsg-replace=\"true\"></span>"; newFormHTML += "</div>"; newFormHTML += "<div class=\"form-group\" >"; newFormHTML += "<input type=\"submit\" value=\"Save\" class=\"btn btn-primary\" />"; newFormHTML += "</div >"; newFormHTML += "</form>"; $("#idbtn").click(function () { var container = document.getElementById("form-container"); container.insertAdjacentHTML("beforeend", newFormHTML); var forms = container.getElementsByTagName("form"); var newForm = forms[forms.length - 1]; //分析表单的 data- 属性 $.validator.unobtrusive.parse(newForm); });
(2) 新建create页
@model StudyMVCDemo.Models.Movie @{ ViewData["Title"] = "Create"; } <h1>Create</h1> <div> <input value="动态加载表单" type="button" /> <div> </div> </div> <div> <a asp-action="Index">Back to List</a> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <script src="https://www.jb51.net/~/js/dynamic-form-validate.js"></script> }
运行程序，点击"动态加载表单" 调用js将html表单添加到form-container元素容器中，点击save提示该字段不能为空，效果如下所示：
2.5 动态控件添加验证
当向表单动态添加控件（比如： <input/> 和 <select/> ）时，需要更新表单上的验证规则。做法是应当先删除现有的验证数据，然后重新分析整个表单，如下js代码所示：
$.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) { //向表单动态添加Input控件 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); } })
2.6 IClientModelValidator