如何从 JavaScript 触发 ASP.NET Core 客户端验证

Posted 2023-03-27

【中文标题】如何从 JavaScript 触发 ASP.NET Core 客户端验证

【英文标题】：How to trigger ASP.NET Core client-side validation from JavaScript

【发布时间】：2021-01-15 12:53:34

【问题描述】：

有没有办法从 javascript 触发 ASP.NET Core 客户端验证？

我有一个带有 <form> 的 Razor 页面页面，其中包含如下内容：

<div class="row">
    <div class="col-md-6">
        <label asp-for="LocationModel.Location" class="control-label"></label>
        <input asp-for="LocationModel.Location" class="form-control" />
        <span asp-validation-for="LocationModel.Location" class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <label asp-for="LocationModel.LoadsPerMonth" class="control-label"></label>
        <input asp-for="LocationModel.LoadsPerMonth" class="form-control" />
        <span asp-validation-for="LocationModel.LoadsPerMonth" class="text-danger"></span>
    </div>
</div>

如果我提交表单，任何验证错误都会突出显示。有什么方法可以从 JavaScript 触发这个吗？

我实际上并没有将表单提交到服务器。我只想使用 JavaScript 中的值。但如果可以的话，我想使用 ASP.NET Core 验证。我可以看到我可以设置验证<span>s的文本。如果我知道如何像验证那样使控件边框变为红色，也许我可以这样做。

我发现了许多这样做的示例，但不适用于 ASP.NET Core 或 Razor Pages。

【参考方案1】：

您可以通过不显眼的验证来做到这一点。为此，您需要包含呈现 jQuery 不显眼的验证脚本的局部视图。为此，请将以下内容添加到视图底部：

@section Scripts 
    // You can find the partial in ~/Views/Shared
    @ await html.RenderPartialAsync("_ValidationScriptsPartial"); 

接下来，作为在加载时从 JavaScript 验证表单的愚蠢示例，您可以在包含部分的下方添加 script 到同一 Scripts 部分：

@section Scripts 
    @ await Html.RenderPartialAsync("_ValidationScriptsPartial"); 
    <script type="text/javascript">
        $(function () 
            $('#formID').validate();

            if ($('#formID').valid() === true) 
                console.log("valid");
             else 
                console.log("invalid");
            
        );
    </script>

按 cmets 更新

@model SiteViewModel

<form asp-action="Index" id="formID" method="post">
    <input asp-for="Name" />
    <span asp-validation-for="Name"></span>
    <input type="submit" />
</form>

@section Scripts 
    @ await Html.RenderPartialAsync("_ValidationScriptsPartial"); 
    <script type="text/javascript">
        $(function () 
            $('#formID').validate();

            if ($('#formID').valid() === false) 
                console.log("invalid");
             else 
                console.log("valid!");
            
        );
    </script>

SiteViewModel 只是：

public class SiteViewModel

    [Required]
    public string Name  get; set; 

【讨论】：

我已经包含了 _ValidationScriptsPartial 但有些东西不见了。如果我添加一个提交按钮并单击它，我的所有验证框都会显示错误。但是如果我打电话给$('#myform').validate()，这不会发生。

奇怪。我将 _ValidationScriptsPartial 的引用移到了其他 JavaScript 的上方，就像您拥有它一样，但仍然没有显示错误。

是的，我只是尝试了一个单级字段并得到了相同的结果。

我必须走开。到目前为止，我感谢您的回复。如果它对你有用，那一定是对的。但有些不对劲。也许您可以发布生成的标记（在调用 validate() 之前）？

我想知道这是否与您使用 MVC 而我使用 Razor Pages 的事实有关。无论如何，我回来后会更深入地挖掘。这就是为什么我想知道您生成的 HTML 是否会有所不同。