无InputText字段时Blazor预订应用自定义验证错误实现方法

针对你用日历按钮选择日期、无InputText字段的场景，下面两种方案可以直接实现自定义验证错误的抛出和显示：

方案一：手动操作EditContext管理验证消息 #

不需要依赖Input组件，直接通过EditContext添加/清除验证消息，并通知UI更新状态：

<EditForm Model="@bookingDates" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    
    <!-- 日历选择按钮 -->
    <button @onclick="@(() => SelectCheckInDate(DateTime.Today))">选择今日作为入住日期</button>
    <button @onclick="@(() => SelectCheckOutDate(DateTime.Today.AddDays(1)))">选择明日作为退房日期</button>

    <!-- 显示对应字段的验证错误 -->
    <ValidationMessage For="@(() => bookingDates.CheckInDate)" />
    <ValidationMessage For="@(() => bookingDates.CheckOutDate)" />

    <button type="submit">提交预订</button>
</EditForm>

@code {
    private BookingDatesVM bookingDates = new();
    private EditContext? _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(bookingDates);
        base.OnInitialized();
    }

    private void SelectCheckInDate(DateTime selectedDate)
    {
        bookingDates.CheckInDate = selectedDate;
        ValidateBookingDates();
    }

    private void SelectCheckOutDate(DateTime selectedDate)
    {
        bookingDates.CheckOutDate = selectedDate;
        ValidateBookingDates();
    }

    private void ValidateBookingDates()
    {
        if (_editContext == null) return;

        // 先清除该字段之前的所有验证消息
        _editContext.ClearValidationMessages();

        // 自定义验证逻辑
        if (bookingDates.CheckInDate == default)
        {
            _editContext.AddValidationMessage(
                FieldIdentifier.Create(() => bookingDates.CheckInDate),
                "请选择入住日期");
        }

        if (bookingDates.CheckOutDate == default)
        {
            _editContext.AddValidationMessage(
                FieldIdentifier.Create(() => bookingDates.CheckOutDate),
                "请选择退房日期");
        }
        else if (bookingDates.CheckOutDate <= bookingDates.CheckInDate)
        {
            _editContext.AddValidationMessage(
                FieldIdentifier.Create(() => bookingDates.CheckOutDate),
                "退房日期必须晚于入住日期");
        }

        // 通知UI更新验证状态，否则错误不会显示
        _editContext.NotifyValidationStateChanged();
    }

    private void HandleSubmit()
    {
        // 执行预订提交逻辑
    }

    public class BookingDatesVM
    {
        public DateTime CheckInDate { get; set; }
        public DateTime CheckOutDate { get; set; }
    }
}

关键说明： #

• 通过FieldIdentifier.Create精准定位要验证的模型属性
• 每次验证前调用ClearValidationMessages避免旧错误残留
• 必须调用NotifyValidationStateChanged触发UI刷新，否则验证消息不会更新

方案二：自定义数据注解属性+触发EditContext验证 #

如果更倾向于用数据注解的方式管理验证规则，可以给模型添加自定义验证属性，然后在日期变更后触发全局验证：

第一步：给模型添加验证属性 #

public class BookingDatesVM
{
    [Required(ErrorMessage = "请选择入住日期")]
    public DateTime CheckInDate { get; set; }

    [Required(ErrorMessage = "请选择退房日期")]
    [CheckOutMustBeAfterCheckIn(ErrorMessage = "退房日期必须晚于入住日期")]
    public DateTime CheckOutDate { get; set; }
}

// 自定义验证属性
public class CheckOutMustBeAfterCheckInAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
        var model = validationContext.ObjectInstance as BookingDatesVM;
        if (model != null && value is DateTime checkOutDate)
        {
            if (checkOutDate <= model.CheckInDate)
            {
                return new ValidationResult(ErrorMessage);
            }
        }
        return ValidationResult.Success;
    }
}

第二步：组件中触发验证 #

<EditForm EditContext="@_editContext" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    
    <button @onclick="@(() => SelectCheckInDate(DateTime.Today))">选择入住日期</button>
    <button @onclick="@(() => SelectCheckOutDate(DateTime.Today.AddDays(1)))">选择退房日期</button>

    <ValidationMessage For="@(() => bookingDates.CheckInDate)" />
    <ValidationMessage For="@(() => bookingDates.CheckOutDate)" />

    <button type="submit">提交</button>
</EditForm>

@code {
    private BookingDatesVM bookingDates = new();
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(bookingDates);
        base.OnInitialized();
    }

    private void SelectCheckInDate(DateTime selectedDate)
    {
        bookingDates.CheckInDate = selectedDate;
        _editContext.Validate(); // 触发全局验证
    }

    private void SelectCheckOutDate(DateTime selectedDate)
    {
        bookingDates.CheckOutDate = selectedDate;
        _editContext.Validate(); // 触发全局验证
    }

    private void HandleSubmit()
    {
        // 提交逻辑
    }
}

常见问题排查 #

如果之前尝试EditContext方案没成功，大概率是以下原因：

1. 没有调用NotifyValidationStateChanged或Validate()触发UI更新
2. ValidationMessage的For表达式没有正确绑定到模型属性（比如拼写错误）
3. 手动添加验证消息时，FieldIdentifier没有精准指向目标属性

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