ASP.NET Core MVC中如何在自定义验证属性内生成客户端验证JS代码？

这个需求太实用了——把客户端验证逻辑和自定义属性绑在一起，彻底摆脱每次都要手动加JS文件的麻烦，复用性直接拉满！我来给你一步步拆解具体实现方法：

ASP.NET Core的IClientModelValidator接口允许我们在生成客户端验证属性的同时，借助ViewContext将所需的JavaScript脚本直接注入到页面中。关键是要避免重复注入脚本（比如同一个页面多次使用该属性时），所以我们可以用HttpContext.Items来做标记。

1. 自定义验证属性类：继承ValidationAttribute（处理服务器端验证）和IClientModelValidator（处理客户端验证逻辑注入）。
2. 服务器端验证逻辑：在IsValid方法里编写你的验证规则。
3. 客户端验证属性配置：在AddValidation方法中添加data-val系列属性，让Unobtrusive Validation识别这个自定义规则。
4. 脚本注入逻辑：通过ViewContext获取当前请求的上下文，检查脚本是否已经注入，若没有则生成并添加客户端验证的JS代码。

自定义验证属性类 #

using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;
using System.ComponentModel.DataAnnotations;

public class StartsWithCAttribute : ValidationAttribute, IClientModelValidator
{
    private readonly string _errorMessage;

    public StartsWithCAttribute(string errorMessage)
    {
        _errorMessage = errorMessage;
    }

    // 服务器端验证逻辑
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value == null || !value.ToString().Trim().StartsWith("C", StringComparison.OrdinalIgnoreCase))
        {
            return new ValidationResult(_errorMessage);
        }
        return ValidationResult.Success;
    }

    // 客户端验证配置与脚本注入
    public void AddValidation(ClientModelValidationContext context)
    {
        if (context == null)
            throw new ArgumentNullException(nameof(context));

        // 添加Unobtrusive Validation需要的data-val属性
        MergeAttribute(context.Attributes, "data-val", "true");
        var validationRuleName = "startswithc";
        MergeAttribute(context.Attributes, $"data-val-{validationRuleName}", _errorMessage);

        // 注入客户端验证脚本
        InjectClientValidationScript(context.ViewContext);
    }

    // 辅助方法：合并属性（避免重复添加）
    private void MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (!attributes.ContainsKey(key))
        {
            attributes.Add(key, value);
        }
    }

    // 注入客户端验证脚本的核心方法
    private void InjectClientValidationScript(ViewContext viewContext)
    {
        const string scriptFlagKey = "StartsWithCValidationScript";
        // 检查脚本是否已经注入，避免重复加载
        if (viewContext.HttpContext.Items.ContainsKey(scriptFlagKey))
            return;

        viewContext.HttpContext.Items[scriptFlagKey] = true;

        // 生成客户端验证的JS代码
        var validationScript = @"
$(function() {
    // 添加自定义验证方法
    $.validator.addMethod('startswithc', function(value, element) {
        // 这里写客户端验证逻辑，和服务器端保持一致
        return value && value.trim().toLowerCase().startsWith('c');
    });

    // 注册Unobtrusive适配器，关联data-val属性
    $.validator.unobtrusive.adapters.add('startswithc', [], function(options) {
        options.rules['startswithc'] = true;
        options.messages['startswithc'] = options.message;
    });
});";

        // 将脚本添加到全局脚本集合（推荐在布局页统一渲染）
        if (!viewContext.HttpContext.Items.ContainsKey("GlobalClientValidationScripts"))
        {
            viewContext.HttpContext.Items["GlobalClientValidationScripts"] = new List<string>();
        }

        ((List<string>)viewContext.HttpContext.Items["GlobalClientValidationScripts"]).Add($"<script>{validationScript}</script>");
    }
}

布局页配置（统一渲染脚本） #

在你的_Layout.cshtml底部（jQuery、Validation脚本之后）添加这段代码，确保脚本在正确的时机加载：

<!-- 先引用依赖库 -->
<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>

<!-- 渲染自定义验证脚本 -->
@if (ViewContext.HttpContext.Items.ContainsKey("GlobalClientValidationScripts"))
{
    foreach (var script in (List<string>)ViewContext.HttpContext.Items["GlobalClientValidationScripts"])
    {
        @Html.Raw(script)
    }
}

模型中使用属性 #

public class MyModel
{
    [StartsWithC("输入内容必须以C开头！")]
    public string MyField { get; set; }
}

• 必须确保页面已经引用了jQuery、jQuery Validation和jQuery Unobtrusive Validation这三个核心库，自定义验证依赖它们运行。
• 脚本注入用HttpContext.Items做标记，避免同一个页面多次使用该属性时重复加载脚本，提升性能。
• 客户端验证逻辑尽量和服务器端保持一致，避免出现前后端验证结果不一致的情况。

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