ASP.NET Core 6.0 jquery-validation致表单无法提交、缺后端验证求助

客户端验证正常触发但表单无法进入后端控制器，是这类开发场景的高频问题，按以下步骤逐一排查修复即可：

1. 修复脚本引入问题 #

脚本配置错误是这类问题的最高发原因，先核对以下几点：

• 严格遵守引入顺序：必须按照「jQuery主库 → jquery.validate.js → jquery.validate.unobtrusive.js」的顺序加载脚本，顺序颠倒会导致提交事件绑定异常
• 修复语法错误：你当前贴出的_PartialValidation.cshtml中script标签未闭合、src属性引号缺失，会导致脚本加载失败，正确的脚本引入示例如下：

<!-- 若_Layout.cshtml已全局引入jQuery，此处不要重复引入jQuery主库 -->
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

• 禁止重复引入jQuery：如果布局页已经加载过jQuery，分部视图重复引入会覆盖原有jQuery实例，导致已经绑定的验证事件失效，直接拦截所有提交动作。

2. 核对表单基础配置 #

表单属性配置错误也会导致提交失败，逐一核对：

• 不要使用裸<form>标签，推荐用ASP.NET Core自带的表单标签助手生成，会自动补全提交地址、防伪令牌、验证属性，示例写法：

@model LoginViewModel
<form asp-action="Login" asp-controller="Account" method="post">
    <div class="mb-3">
        <label asp-for="UserName" class="form-label"></label>
        <input asp-for="UserName" class="form-control" />
        <span asp-validation-for="UserName" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label asp-for="Password" class="form-label"></label>
        <input asp-for="Password" type="password" class="form-control" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
    <div asp-validation-summary="ModelOnly" class="text-danger mt-2"></div>
</form>

• 确认提交按钮的type属性为submit，写成button不会触发表单提交事件。

3. 实现配套后端验证逻辑 #

前端验证只是为了提升用户体验，真正的安全验证必须在后端实现，按以下方式配置：

• 首先给接收表单参数的ViewModel添加数据注解验证规则，和前端验证规则对齐：

using System.ComponentModel.DataAnnotations;

public class LoginViewModel
{
    [Required(ErrorMessage = "用户名不能为空")]
    public string UserName { get; set; }

    [Required(ErrorMessage = "密码不能为空")]
    [StringLength(20, MinimumLength = 6, ErrorMessage = "密码长度需为6-20位")]
    public string Password { get; set; }
}

• 控制器的提交接口必须标记[HttpPost]特性，且通过ModelState.IsValid做后端校验：

public class AccountController : Controller
{
    [HttpGet]
    public IActionResult Login()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Login(LoginViewModel model)
    {
        // 后端校验：无论前端是否做过验证，都会重新校验参数合法性
        if (!ModelState.IsValid)
        {
            // 校验不通过直接返回视图，错误信息会自动绑定到页面对应位置
            return View(model);
        }

        // 校验通过后再写业务逻辑，比如校验账号密码、写入登录状态
        return RedirectToAction("Index", "Home");
    }
}

4. 验证效果 #

配置完成后按以下场景测试：

• 输入不符合规则的内容提交：前端直接弹出/显示验证错误，不会发送请求到后端（属于正常逻辑，减少无效请求）
• 输入符合规则的内容提交：正常发送POST请求到后端接口，断点打在控制器Action上可以正常进入，后端校验不通过的错误也能正常回显到页面。

如果配置后依然无法提交，打开浏览器F12开发者工具的Console面板，排查是否有JS报错，先解决JS报错即可恢复正常。

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