ASP.NET Core 6 自定义验证属性的客户端验证实现问题

问题场景 #

已实现服务器端自定义验证属性AnotherTestAttribute，逻辑为：当指定依赖属性（如CurrentlyPracticing）的值等于设定值（如1）时，当前属性（如ProfLicense）需为必填项。服务器端验证正常，但客户端验证脚本存在问题，需要修复以实现无提交即时验证。

修复方案 #

1. 调整自定义验证属性的客户端元数据 #

修改AnotherTestAttribute中的AddValidation方法，确保传递正确的依赖元素选择器（适配ASP.NET Core的字段ID生成规则）：

public void AddValidation(ClientModelValidationContext context)
{
    var errorMessage = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
    MergeAttribute(context.Attributes, "data-val", "true");
    MergeAttribute(context.Attributes, "data-val-testif", errorMessage);

    // 生成依赖属性的完整客户端ID（含表单前缀）
    var dependentElementId = $"#{context.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(_propertyName)}";
    MergeAttribute(context.Attributes, "data-val-testif-dependentid", dependentElementId);
    MergeAttribute(context.Attributes, "data-val-testif-desiredvalue", _desiredValue.ToString());
}

2. 修正客户端验证脚本 #

替换原有的验证方法和适配器，修复参数传递、类型比较和逻辑对齐问题：

@section Scripts {
@{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}

<script type="text/javascript">
    // 注册自定义验证方法
    $.validator.addMethod("testif", function (value, element, params) {
        const dependentElement = $(params.dependentid);
        const desiredValue = params.desiredvalue;
        const dependentValue = dependentElement.val();

        // 当依赖属性值匹配设定值时，当前字段不能为空
        if (dependentValue === desiredValue) {
            return $.trim(value) !== "";
        }
        // 不满足依赖条件时，验证直接通过
        return true;
    });

    // 适配Unobtrusive验证框架
    $.validator.unobtrusive.adapters.add("testif", ["dependentid", "desiredvalue"], function (options) {
        options.rules.testif = {
            dependentid: options.params.dependentid,
            desiredvalue: options.params.desiredvalue
        };
        options.messages.testif = options.message;
    });

    // 监听依赖属性变化，自动触发关联字段验证
    $(function() {
        $("#CurrentlyPracticing").on("change", function() {
            $("#ProfLicense").valid();
            $("#ProfLicenseState").valid();
        });
    });
</script>
}

3. 关键注意事项 #

• 类型一致性：客户端获取的表单值均为字符串，因此服务器端_desiredValue转换为字符串后需与客户端值完全匹配（如"1"而非数字1）
• 选择器准确性：使用GetFullHtmlFieldId确保依赖元素的ID正确，避免表单前缀导致的选择器失效
• 逻辑对齐：客户端验证逻辑与服务器端保持一致，均检查当依赖条件满足时当前字段是否为空白

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