基于ASP.NET Core(v2.0)模型验证实现表单提交按钮禁用咨询

ASP.NET Core的模型验证本身是服务器端的，但我们可以复用它定义的验证规则，配合前端逻辑轻松实现“验证不通过就禁用提交按钮”的需求，不用重复写两套验证规则，非常省心。我给你一步步拆解怎么做：

1. 先在后端定义模型验证规则 #

首先在你的实体类上标注验证属性，这是ASP.NET Core模型验证的基础，比如：

public class UserForm
{
    [Required(ErrorMessage = "请输入用户名")]
    [StringLength(20, MinimumLength = 3, ErrorMessage = "用户名长度在3-20字符之间")]
    public string Username { get; set; }

    [Required(ErrorMessage = "请输入邮箱")]
    [EmailAddress(ErrorMessage = "请输入有效的邮箱格式")]
    public string Email { get; set; }

    [Required(ErrorMessage = "请输入密码")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

2. 在Razor视图中生成带验证属性的表单 #

用ASP.NET Core的TagHelper（asp-for、asp-validation-for）生成表单，它会自动把后端的验证规则转换成前端能识别的data-val-*属性，这是实现前后端验证联动的关键：

@model UserForm

<form id="userForm" method="post">
    <div class="form-group">
        <label asp-for="Username"></label>
        <input asp-for="Username" class="form-control" />
        <span asp-validation-for="Username" class="text-danger"></span>
    </div>

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

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

    <!-- 初始状态禁用提交按钮 -->
    <button type="submit" id="submitBtn" class="btn btn-primary" disabled>提交</button>
</form>

3. 引入客户端验证脚本+编写按钮控制逻辑 #

ASP.NET Core自带了基于jQuery的非侵入式验证脚本，我们只需要引入它们，再写几行JS监听表单验证状态即可：

@section Scripts {
    <!-- 引入依赖脚本（项目模板默认已包含在lib目录下） -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

    <script>
        $(document).ready(function() {
            const form = $("#userForm");
            const submitBtn = $("#submitBtn");

            // 页面加载时先检查一次表单状态
            updateSubmitButtonState();

            // 监听输入框的变化，实时更新按钮状态
            form.find("input").on("input change blur", function() {
                updateSubmitButtonState();
            });

            function updateSubmitButtonState() {
                // 用jQuery Validate的valid()方法检查表单是否符合所有验证规则
                const isFormValid = form.valid();
                // 根据验证结果启用/禁用按钮
                submitBtn.prop("disabled", !isFormValid);
            }
        });
    </script>
}

关键注意点 #

• 服务器端验证不能丢：前端验证只是提升用户体验，恶意用户可以绕过前端直接提交请求，所以在Controller的Action里必须再检查ModelState.IsValid：

  [HttpPost]
  public IActionResult Submit(UserForm model)
  {
      if (!ModelState.IsValid)
      {
          return View(model);
      }
      // 验证通过，处理业务逻辑
      return RedirectToAction("Success");
  }
  

• 脚本依赖：如果你的项目里没有这些验证脚本，可以通过NuGet安装Microsoft.jQuery.Unobtrusive.Validation包。

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