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

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

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

我已阅读 MS docs on validation 并决定最适合应用客户端验证。然而,在提供的例子中,他们用 jQuery 显示了一些东西,我的印象是 jQuery 现在有点老了。此外,我们被 MS 的优秀工具宠坏了,它们会自动为我们做一些事情。 (我认为具有属性 asp-validation-for 和 div 具有属性 asp-validation-summary暗示魔法会在那里。事实并非如此。)

我的代码如下图

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

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

我已经看到 some questions 关于这个问题,但由于那些似乎没有获得批准的决议,我觉得最好问一下,而不是猜谜游戏,以便以正确的方式做事。

您需要添加对验证文件的引用。检查您的 Views/Shared 文件夹中是否有 _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" />
}