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

kd3sttzy  于 2022-11-19  发布在  .NET
关注(0)|答案(2)|浏览(169)

有没有办法从JavaScript触发ASP.NET核心客户端验证?
我有一个包含<form>的Razor Pages页面,其中包含以下内容:

<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核心验证。我可以看到,我可以只设置验证的文本<span> s。如果我知道如何像验证那样使控件边框变红,也许我可以这样做。
我找到了许多这样的例子,但不是针对ASP.NET核心或Razor页面。

bxpogfeg

bxpogfeg1#

您可以通过非侵入式验证来实现这一点。为此,您需要包含呈现jQuery非侵入式验证脚本的局部视图。为此,请在视图底部添加以下内容:

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

接下来,作为一个在加载时从JavaScript验证表单的愚蠢示例,您可以将script添加到同一个Scripts部分,在包含partial的下面:

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

k2arahey2#

在最新的.Net Core应用程序中,您会在Shared文件夹中找到_ValidationScriptsPartial.cshtml文件。在views (.cshtml)的最后使用它,在所有标记关闭后进行客户端验证

@section Scripts{
    @{
       <partial name="_ValidationScriptsPartial"/>
    }
}

相关问题