ASP.NET自定义验证属性无法在客户端生效的原因咨询

你的自定义UniqueSkuAttribute仅实现了服务端验证逻辑，未配置客户端验证所需的元数据和JavaScript规则，这是导致客户端不生效的核心原因。默认的Required、RegularExpression等属性已经内置了客户端验证支持，而自定义属性需要手动完成以下配置：

1. 修改自定义验证属性，实现客户端验证接口 #

让UniqueSkuAttribute实现IClientModelValidator接口，添加客户端验证所需的元数据（生成页面元素的data-val-*属性）：

using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;

public class UniqueSkuAttribute : ValidationAttribute, IClientModelValidator
{
    // 修正服务端验证逻辑：IsValid返回true表示验证通过，因此SKU不存在时才返回true
    public override bool IsValid(object? value)
    {
        if (value == null)
        {
            return false; 
        }

        // IsValueExist返回true表示SKU已存在，取反后表示验证通过
        return !IsValueExist(value.ToString());
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        // 启用客户端验证
        MergeAttribute(context.Attributes, "data-val", "true");
        // 设置验证失败提示信息
        MergeAttribute(context.Attributes, "data-val-uniquesku", ErrorMessage ?? "该SKU已存在");
    }

    // 辅助方法：避免重复添加属性
    private bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key)) return false;
        attributes.Add(key, value);
        return true;
    }

    // 你的SKU存在检查方法
    private bool IsValueExist(string sku)
    {
        // 原有的检查逻辑
    }
}

2. 添加后端验证接口 #

客户端需要调用后端接口异步检查SKU唯一性，新增一个API接口：

[HttpPost]
public IActionResult CheckSkuUnique(string sku)
{
    // 返回true表示SKU唯一（验证通过），false表示已存在
    bool isUnique = !IsValueExist(sku);
    return Json(isUnique);
}

3. 编写客户端JavaScript验证逻辑 #

在视图中（或单独的JS文件，需在_ValidationScriptsPartial.cshtml之后加载）添加jQuery Validate自定义验证规则：

// 注册自定义验证方法
$.validator.addMethod("uniquesku", function (value, element) {
    // 空值交由Required验证处理，这里返回true跳过当前验证
    if (!value) return true;

    let isUnique = false;
    // 同步请求后端接口检查唯一性
    $.ajax({
        url: '/YourController/CheckSkuUnique', // 替换为你的控制器和接口路径
        type: 'POST',
        async: false,
        data: { sku: value },
        success: function (res) {
            isUnique = res;
        },
        error: function () {
            isUnique = false;
        }
    });
    return isUnique;
});

// 关联验证方法与HTML的data属性
$.validator.unobtrusive.adapters.add("uniquesku", [], function (options) {
    options.rules["uniquesku"] = true;
    options.messages["uniquesku"] = options.message;
});

4. 验证视图生成的属性 #

确保视图中的input元素已生成data-val-uniquesku属性，示例生成的HTML应类似：

<input asp-for="SKU" maxlength="13" class="form-control" placeholder="SKU" 
       data-val="true" 
       data-val-required="Value is needed" 
       data-val-uniquesku="Value already exist" 
       data-val-regex="Value in template of: 01234567890xx" 
       data-val-regex-pattern="^\d{11}[a-zA-Z]{2}$">

完成以上步骤后，客户端就能触发SKU唯一性的实时验证了。

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