在 C# ASP.NET Core 2.2 中在客户端实现简单验证

Implementing simple validation on the client-side in C# ASP.NET Core 2.2

提问人:DonkeyBanana 提问时间:2/10/2019 更新时间:2/12/2019 访问量:1710

问:

在 C# ASP.NET Core 2.2 中在客户端添加简单验证

我已经阅读了有关验证的 MS 文档,并认为它最适合应用客户端验证。但是,在提供的示例中,它们显示了 jQuery 的一些内容,我的印象是 jQuery 现在已经有点老了。此外,我们被 MS 的好工具宠坏了,这些工具会自动为我们做事。(我认为带有属性 asp-validation-for 的 span 和带有属性 asp-validation-summary 的 div 暗示了魔术会在那里。事实并非如此。

我的代码如下图所示。

<div class="row">
  <div class="col-md-4">
    <form asp-controller="Security"
          asp-action="Register"
          method="post">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
      <div class="form-group">
        <label asp-for="@Model.Email" class="control-label"></label>
        <input asp-for="@Model.Email" class="form-control" />
        <span asp-validation-for="@Model.Email" class="text-danger"></span>
      </div>
      <div class="form-group">
        <label asp-for="@Model.Info" class="control-label"></label>
        <input asp-for="@Model.Info" class="form-control" />
        <span asp-validation-for="@Model.Info" class="text-danger"></span>
      </div>
      <div class="form-group">
        <input type="submit" value="Send" class="btn btn-primary" />
      </div>
    </form>
  </div>
</div>

我想知道我缺少什么来使验证正常工作(即,如果没有在提交表单时填写两个字段以及取消表单提交,则会收到错误消息)。或者,这是我缺少的相当基本的东西,我想得到有关适当搜索词的提示。请注意,我只是在寻找视觉效果:客户端消息,与输入的后端处理程序无关。

我看过一些关于这个问题的问题,但由于这些问题似乎没有得到批准,我觉得最好提出来,以便以正确的方式做事,而不是猜谜游戏。

C# 验证 ASP.Net-Core 客户端 ASP.Net-Core-2.2

评论

0赞 Joe Audette 2/10/2019
asp.net 核心客户端验证依赖于来自Microsoft的 jquery.unobtrusive 验证,则必须在页面中包含该脚本才能获得客户端验证。github.com/aspnet/jquery-validation-unobtrusive

答:

2赞 Ryan 2/12/2019 #1

您需要添加对验证文件的引用。检查您的“视图/共享”文件夹中是否有。_ValidationScriptsPartial.cshtml

<environment include="Development">
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"
        asp-fallback-src="~/Identity/lib/jquery-validation/dist/jquery.validate.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.validator"
        crossorigin="anonymous"
        integrity="sha384-rZfj/ogBloos6wzLGpPkkOr/gpkBNLZ6b6yLy4o+ok+t/SAKlL5mvXLr0OXNi1Hp">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.9/jquery.validate.unobtrusive.min.js"
        asp-fallback-src="~/Identity/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
        crossorigin="anonymous"
        integrity="sha384-ifv0TYDWxBHzvAk2Z0n8R434FL1Rlv/Av18DXE43N/1rvHyOG4izKst0f2iSLdds">
</script>
</environment>

在视图中添加以下代码,

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