ASP.Net Core Razor页面：<form class =“ needs-validation”>如何真正调用客户端验证？

问题描述

我正在使用ASP.Net Core 3.1 Web应用程序。

如果“剃刀”页面的表单带有class="needs-validation"，则会为该表单中的字段调用客户端验证。具体来说，当用户单击“提交”时，将调用jquery-validation-unobtrusive。

问：这是怎么发生的？什么“魔术”将HTML类“需求验证”链接到“ validate（）” Javascript代码？某个地方有一些CSS文件定义了这种链接吗？

问：“需求验证”是Bootstrap类吗？还是标准的HTML5 / CSS3？在哪里/如何定义？

这些是我找到的一些链接，但是我仍然不理解调用验证代码的类“ needs-validation”之间的联系：

• https://wakeupandcode.com/validation-in-asp-net-core-3-1/
• https://getbootstrap.com/docs/4.0/components/forms/
• https://github.com/aspnet/jquery-validation-unobtrusive

解决方法

默认情况下，asp.net核心应用程序使用jQuery Unobtrusive Validation和https://jqueryvalidation.org/插件来实现客户端验证。 JQuery Unobtrusive Validation解析数据属性，并将逻辑传递给jQuery Validation，从而有效地将服务器端验证逻辑“复制”到客户端。您可以使用标签帮助程序在客户端上显示验证错误，如下所示（不使用class="needs-validation"）：

    <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="Movie.Title" class="control-label"></label>
            <input asp-for="Movie.Title" class="form-control" />
            <span asp-validation-for="Movie.Title" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Movie.Description" class="control-label"></label>
            <input asp-for="Movie.Description" class="form-control" />
            <span asp-validation-for="Movie.Description" class="text-danger"></span>
        </div>
        ....
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>

class="needs-validation"用于自定义Bootstrap表单验证消息（使用HTML5表单验证），然后，它将基于此类选择器来查找元素并验证数据。检查Bootstrap Validation，了解其工作原理和使用方法。