如何让ASP.NET Core 2 Razor Pages验证器在页面加载时显示必填提示

嘿，我之前也碰到过一模一样的需求——不想让用户填完点提交才知道漏了必填项，希望页面一加载就把验证提示亮出来。这里有几个实用的解决办法：

方法1：手动触发客户端验证（最直接高效） #

Razor Pages默认用jQuery Validate + Unobtrusive Validation做客户端验证，默认逻辑是只有提交表单时才触发验证。我们可以在页面加载完成后手动调用验证方法，让必填提示立刻显示：

首先得确保你的页面已经引用了验证脚本（一般项目里会有_ValidationScriptsPartial.cshtml这个分部视图），如果没引用的话，在页面底部加上这段代码：

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        // DOM加载完成后触发表单验证
        $(document).ready(function() {
            // 如果页面只有一个表单，直接用$("form")就行；多表单的话给目标表单加ID，比如$("#myForm")
            $("form").valid();
        });
    </script>
}

这段代码会在页面加载完成后立刻触发表单的客户端验证，所有必填项的Required提示就会直接显示出来。

方法2：添加静态必填标记（辅助强化提示） #

如果想让用户更直观地看到哪些是必填项，除了验证消息，还可以在字段旁手动加个必填星号，结合模型的验证元数据来实现：

假设你的模型是这样的：

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

    [Required(ErrorMessage = "邮箱地址为必填项")]
    public string Email { get; set; }
}

在Razor页面的输入字段区域，可以这样写：

<div class="form-group">
    <label asp-for="Username"></label>
    <!-- 手动渲染必填星号 -->
    @if (ViewData.ModelMetadata.Properties.First(p => p.Name == "Username").IsRequired)
    {
        <span class="text-danger ml-1">*</span>
    }
    <input asp-for="Username" class="form-control" />
    <span asp-validation-for="Username" class="text-danger"></span>
</div>

这样用户一打开页面就能看到星号标记，再配合方法1的验证消息，双重提示更清晰。

注意事项 #

• 一定要确认_ValidationScriptsPartial.cshtml里的jquery.validate.js和jquery.validate.unobtrusive.js脚本都正确引用了，这是客户端验证生效的前提。
• 如果你的项目在Startup里禁用了客户端验证（比如配置了services.AddMvc().AddViewOptions(options => options.ClientValidationEnabled = false);），那方法1就会失效，这种情况要么重新开启客户端验证，要么只用方法2的静态提示。

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