ASP.NET Core MVC应用中客户端验证失效问题求助

我来帮你排查这个客户端验证失效的问题，结合你的模型结构和页面代码，大概率是以下几个环节出了问题，咱们一步步来解决：

1. 确认必要的验证脚本已完整引入 #

ASP.NET Core的非侵入式客户端验证依赖三个核心脚本，而且加载顺序不能错：先jQuery，再jQuery Validation，最后jQuery Validation Unobtrusive。你的代码里只写了一部分，要确保完整引入：

@section scripts {
    <!-- 先加载jQuery核心库 -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- 再加载jQuery Validation插件 -->
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <!-- 最后加载非侵入式验证适配脚本 -->
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

同时要检查~/lib路径下是否存在这些文件，如果是用LibMan或者NuGet管理的，确保已正确安装对应的包。如果控制台出现404错误，说明脚本路径不对，要调整成正确的路径。

2. 确保表单字段正确绑定嵌套模型 #

你的LoginViewModel里包含了Form子属性，所以页面上的表单字段必须正确指向这个嵌套属性，否则ASP.NET Core无法将验证属性渲染到HTML的data-val-*标签中，客户端验证就识别不了。

正确的表单代码应该是这样的：

@model SocialNetwork.Web.ViewModels.LoginViewModel

<form asp-action="Login" method="post">
    <div class="form-group">
        <label asp-for="Form.UserName"></label>
        <input asp-for="Form.UserName" class="form-control" />
        <span asp-validation-for="Form.UserName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Form.Password"></label>
        <input asp-for="Form.Password" class="form-control" />
        <span asp-validation-for="Form.Password" class="text-danger"></span>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input asp-for="Form.RememberMe" />
                @Html.DisplayNameFor(m => m.Form.RememberMe)
            </label>
            <span asp-validation-for="Form.RememberMe" class="text-danger"></span>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

注意所有的asp-for和asp-validation-for都要加上Form.前缀，这样生成的input标签才会带有data-val-required等验证属性，客户端验证才能正常触发。

3. 确认后端已启用客户端验证服务 #

在项目的配置文件中（.NET 6+是Program.cs，.NET 5及以前是Startup.cs），要确保已启用数据注解验证和客户端验证：

.NET 6+ 配置示例： #

var builder = WebApplication.CreateBuilder(args);

// 添加MVC服务并启用数据注解验证
builder.Services.AddControllersWithViews()
    .AddDataAnnotationsValidation() // 启用数据注解验证
    .AddViewLocalization();

var app = builder.Build();

// 其他中间件配置...
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

要注意不要设置options.ClientValidationEnabled = false;，这会直接禁用客户端验证。

4. 检查浏览器控制台是否有脚本错误 #

打开浏览器开发者工具（按F12），切换到Console标签页，看看有没有以下错误：

• 404错误：说明脚本文件没找到，要调整脚本路径
• JS语法错误：可能是自定义脚本破坏了验证脚本的执行
  如果有错误，先解决这些脚本问题，客户端验证才能正常工作。

5. 排查自定义JS是否阻止了表单验证 #

如果你在页面中写了自定义的表单提交逻辑，比如阻止默认提交行为的代码，要确保先触发客户端验证再执行自定义逻辑：

$('form').submit(function(e) {
    // 先触发客户端验证
    if (!$(this).valid()) {
        e.preventDefault(); // 验证不通过则阻止提交
        return;
    }
    // 验证通过后再执行你的自定义逻辑
});

按照以上步骤排查，应该就能解决客户端验证失效的问题了。

内容的提问来源于stack exchange，提问作者Scarass