如何实现ASP.NET Razor页面模型验证通过后才提交至控制器？

现有代码的核心问题 #

1. 脚本加载顺序错误：jQuery是jquery.validate和jquery.validate.unobtrusive的依赖，必须先加载jQuery
2. 自定义提交逻辑干扰内置验证：表单的onsubmit="return false;"和按钮的onclick="check()"直接阻止了ASP.NET内置的非侵入式验证流程
3. 重复DOM ID：两个验证提示span的id都是es，会导致错误提示无法正确绑定到对应字段
4. 验证属性配置错误：Password字段的StringLength(8)是限制最大长度，但错误提示写的是“至少8字符”，属于逻辑矛盾，且提示文本有拼写错误（ne应为be）

分步修复方案 #

1. 修正验证脚本加载顺序 #

修改_ValidationScriptsPartial.cshtml，将jQuery放在最前面：

<script src="~/lib/jquery.js"></script>
<script src="~/jquery.validate.min.js"></script>
<script src="~/jquery.validate.unobtrusive.js"></script>

2. 移除自定义提交逻辑，启用内置验证 #

修改表单HTML，去掉阻止默认提交的属性和自定义点击事件：

<form method="post" id="form" asp-route="Form">
    <div class="form-group">
        <label for="email" asp-for="Email">Email</label>
        <input name="Email" type="email" asp-for="Email" id="email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label for="password" asp-for="Password">Password</label>
        <input name="Password" asp-for="Password" type="password" id="pass" class="form-control" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <input type="submit" class="btn btn-primary" />
    @Html.AntiForgeryToken()
</form>

注：asp-validation-for会自动绑定对应字段的错误信息，不需要手动设置ID，移除重复的id="es"即可。

3. 修正Password字段的验证属性 #

修改PageModel中的Password验证规则，确保逻辑和提示一致：

public class IndexModel : PageModel
{
    [Required(ErrorMessage = "The email field cannot be empty")]
    [StringLength(10, ErrorMessage = "This email address is too long")]
    public string Email { get; set; }

    [Required(ErrorMessage = "The password field cannot be empty")]
    // 改为MinLength限制最小长度，同时可搭配StringLength限制最大长度
    [MinLength(8, ErrorMessage = "Password needs to be at least 8 characters")]
    [StringLength(20, ErrorMessage = "Password cannot exceed 20 characters")]
    public string Password { get; set; }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        return RedirectToRoute("Form");
    }
}

4. 移除自定义check函数 #

直接删除你写的check()函数，因为内置的非侵入式验证会自动处理表单提交前的验证：

// 删掉这段代码
// function check() {
//     let form = document.getElementById("form");
//     let email = document.getElementById("email").value;
//     let es = document.getElementById("es");
//     if (email.length == 0) {
//         es.innerText = "This field is required";
//         return;
//     }
//     form.Submit();
// }

验证效果 #

修改完成后：

• 点击提交按钮时，会先触发客户端验证，不符合规则的字段会实时显示错误提示，且表单不会提交到后端
• 只有当所有字段通过客户端验证后，表单才会提交到OnPost方法
• 后端依然会执行ModelState.IsValid检查，防止恶意绕过客户端验证的请求

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