AspNet Core自定义验证特性客户端失效问题求助

你遇到的客户端验证失效问题，核心是自定义验证特性缺少客户端验证的两个关键配置：没有把对比属性的信息传递给客户端，也没有编写对应的jQuery Validation自定义规则。服务端验证正常是因为你已经正确实现了ValidationAttribute的IsValid方法，但客户端验证需要额外的补充配置。

第一步：完善自定义特性的客户端元数据传递 #

你的ToleranciaLessOrEqualThanAttribute实现了IClientModelValidator，但只添加了基础验证标记和错误消息，没有告诉客户端要和哪个属性的值做比较。需要修改AddValidation方法，补充对比属性的元数据：

public void AddValidation(ClientModelValidationContext context)
{
    if (context == null)
    {
        throw new ArgumentNullException(nameof(context));
    }

    var errorMessage = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
    // 启用客户端验证标记
    context.Attributes.Add("data-val", "true");
    // 设置验证错误消息
    context.Attributes.Add("data-val-tolerancialessorequalthan", errorMessage);
    // 关键：传递需要对比的属性名称给客户端
    context.Attributes.Add("data-val-tolerancialessorequalthan-other", _comparisonProperty);
}

这一步会让生成的HTML输入框带上data-val-tolerancialessorequalthan-other="ToleranciaInferior"属性，客户端脚本就能明确知道要和哪个控件的值做比较。

第二步：编写客户端验证脚本 #

ASP.NET Core的客户端验证依赖jQuery Validation和jQuery Unobtrusive Validation，你需要注册自定义的验证方法和适配器，让框架能识别你的自定义规则。

在视图页面（或者通用的验证脚本文件，比如_ValidationScriptsPartial.cshtml）中添加以下JavaScript代码：

// 注册自定义验证方法：验证当前值是否大于对比值
$.validator.addMethod("tolerancialessorequalthan", function (value, element, params) {
    // 获取对比控件
    var otherElement = $(params);
    if (!otherElement.length) return true; // 若对比控件不存在，默认通过（可按需调整）
    
    var currentValue = parseFloat(value);
    var otherValue = parseFloat(otherElement.val());
    
    // 验证逻辑：ToleranciaSuperior必须大于ToleranciaInferior
    return !isNaN(currentValue) && !isNaN(otherValue) && currentValue > otherValue;
});

// 注册适配器，把HTML中的data-val-*属性映射到验证方法参数
$.validator.unobtrusive.adapters.add("tolerancialessorequalthan", ["other"], function (options) {
    // 把对比属性名转换为控件ID选择器
    options.rules["tolerancialessorequalthan"] = "#" + options.params.other;
    // 设置错误消息
    options.messages["tolerancialessorequalthan"] = options.message;
});

第三步：确保脚本加载顺序正确 #

客户端验证的脚本加载顺序至关重要，必须按以下顺序加载：

1. jQuery
2. jQuery Validation
3. jQuery Unobtrusive Validation
4. 你的自定义验证脚本

比如在_Layout.cshtml中：

<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 src="~/js/custom-validation.js"></script>

第四步：验证视图控件生成正确 #

确保你在视图中使用Tag Helper生成表单控件，这样才能自动带上data-val-*属性：

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

完成以上步骤后，客户端验证就能正常工作了：当用户输入的ToleranciaSuperior小于等于ToleranciaInferior时，会实时显示错误消息，无需提交到服务器。

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