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

Question

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

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

<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>的文本。如果我知道如何像验证那样使控件边框变红，也许我可以做到这一点。

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

Answer 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>
}

根据评论更新

@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; }
}