如何将ModelState验证错误显示在对应输入控件下方？

要让后端验证的密码错误显示在控件下方，核心是后端添加错误时要关联到Password属性，而不是添加模型级全局错误。

1. 修改后端Post动作代码 #

你之前在Post方法里添加错误时，可能用了全局错误的方式（比如ModelState.AddModelError("", "密码错误")），这种错误会被asp-validation-summary捕获，显示在表单下方。

改成关联到Password属性的错误即可：

[HttpPost]
public IActionResult RemoveDetails(YourViewModel model)
{
    if (ModelState.IsValid)
    {
        // 验证密码逻辑
        if (!IsPasswordValid(model.Password))
        {
            // 关键：指定错误关联到Password属性
            ModelState.AddModelError(nameof(model.Password), "密码错误，请重新输入");
        }
    }

    // 返回视图，保留模型状态
    return View(model);
}

这里nameof(model.Password)会自动生成属性名"Password"，和前端asp-for="Password"对应，确保错误被绑定到控件下方的验证元素。

2. 前端无需额外修改 #

你的前端已经在密码控件下方放置了asp-validation-for="Password"的span：

<small>
    <span asp-validation-for="Password" class="text-danger"></span>
</small>

只要后端错误关联到正确的属性，这个span就会自动显示对应的错误消息，替代原来显示在summary里的内容。

补充说明 #

如果你的错误来自自定义验证逻辑或服务，只要确保添加错误时指定的键是模型类中属性的名称，就能让错误显示在对应的控件下方。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono