Blazor数字输入框验证出现重复提示，如何优化为单条自定义提示？

问题根源 #

输入9000000000时，这个数值超出了int类型的最大值（2147483647），导致模型绑定失败，NumField被设为null。此时Required属性检测到值为null触发必填提示，同时Range属性也因输入值不符合范围要求触发提示，两条错误信息同时显示。

解决方案1：修改模型字段类型为long? #

把int?换成long?，这样能容纳更大的数值，避免绑定失败导致字段为null：

[Required(ErrorMessage = "Field is required")]
[Range(1, 99999, ErrorMessage = "Use number between 1 and 99999")]
public long? NumField { get; set; }

输入超大数时，模型能正常绑定值，此时只会触发Range验证，显示自定义范围提示。

解决方案2：自定义验证属性（保留int?类型） #

如果必须使用int?类型，可以自定义验证属性整合逻辑，避免重复提示：

1. 编写自定义验证类 #

public class RequiredIntRangeAttribute : ValidationAttribute
{
    private readonly int _min;
    private readonly int _max;
    private readonly string _requiredMsg;
    private readonly string _rangeMsg;

    public RequiredIntRangeAttribute(int min, int max, string requiredMsg, string rangeMsg)
    {
        _min = min;
        _max = max;
        _requiredMsg = requiredMsg;
        _rangeMsg = rangeMsg;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        // 处理空值情况
        if (value == null)
        {
            return new ValidationResult(_requiredMsg);
        }

        // 尝试转换为int，失败则说明超出范围
        if (!int.TryParse(value.ToString(), out int num))
        {
            return new ValidationResult(_rangeMsg);
        }

        // 验证数值范围
        if (num < _min || num > _max)
        {
            return new ValidationResult(_rangeMsg);
        }

        return ValidationResult.Success;
    }
}

2. 替换模型上的验证属性 #

[RequiredIntRange(1, 99999, "Field is required", "Use number between 1 and 99999")]
public int? NumField { get; set; }

解决方案3：前端控制提示显示 #

通过EditContext手动筛选验证消息，控制BSFeedback的显示内容：

<BSInput InputType="InputType.Number" @bind-Value="data.NumField" ValidateOnInput="true" />
@if (EditContext.GetValidationMessages(() => data.NumField).Any())
{
    var messages = EditContext.GetValidationMessages(() => data.NumField).ToList();
    // 同时存在两条提示时，只显示范围提示
    if (messages.Count > 1 && messages.Contains("Field is required") && messages.Contains("Use number between 1 and 99999"))
    {
        <BSFeedback For="@(() => data.NumField)" Message="Use number between 1 and 99999" />
    }
    else
    {
        <BSFeedback For="@(() => data.NumField)" />
    }
}

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