Blazor中如何实现InputText失焦（Tab切换）时触发DataAnnotationsValidation？

要实现输入框失焦（Tab切换）和表单提交时都触发DataAnnotations验证，需要手动监听失焦事件并触发对应字段的验证，以下是具体方案：

核心原理 #

Blazor的InputText默认仅在值变更（输入字符）时触发验证，但Required这类规则在字段未被修改过（IsModified为false）时，不会自动在失焦时触发验证。通过监听输入框的onblur事件，调用EditContext的ValidateField方法，可强制触发表单字段验证。

修改后的完整代码 #

@using System.ComponentModel.DataAnnotations
@page "/modaltest"

<EditForm Model="_testClass" OnValidSubmit="OnValidSubmit" FormName="Example Form" @ref="_editContext">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label for="make">Make:</label>
        <InputText id="make" class="form-control" 
                   @bind-Value="_testClass.make"
                   @onblur="() => ValidateField(() => _testClass.make)" />
        <ValidationMessage For="@(() => _testClass.make)" />
    </div>
    <div class="form-group">
        <label for="model">Model:</label>
        <InputText id="model" class="form-control" 
                   @bind-Value="_testClass.model"
                   @onblur="() => ValidateField(() => _testClass.model)" />
        <ValidationMessage For="@(() => _testClass.model)" />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? _editContext;

    public class TestClass123
    {
        [Required(ErrorMessage = "此字段为必填项")]
        [MaxLength(10, ErrorMessage = "最大长度为10")]
        public string? make { get; set; }
        [Required(ErrorMessage = "此字段为必填项")]
        [MaxLength(20, ErrorMessage = "最大长度为20")]
        public string? model { get; set; }
    }

    public TestClass123 _testClass = new TestClass123();

    private void ValidateField<T>(Expression<Func<T>> propertyExpression)
    {
        if (_editContext == null) return;
        var fieldIdentifier = FieldIdentifier.Create(propertyExpression);
        _editContext.ValidateField(fieldIdentifier);
    }

    public void OnValidSubmit()
    {
        Console.WriteLine("表单提交成功");
    }
}

关键修改点 #

• 给EditForm添加@ref="_editContext"，获取表单的编辑上下文实例
• 为每个InputText绑定@onblur事件，调用自定义的ValidateField方法
• 实现ValidateField方法：通过属性表达式创建字段标识符，调用EditContext.ValidateField强制验证指定字段
• 给模型属性添加?标记可空，符合.NET8的nullable引用类型规范

额外说明 #

• 提交表单时，EditForm会自动触发全表单验证，无需额外处理
• 对于MaxLength这类规则，默认在值变更时就会触发验证，结合失焦验证后，能实现输入时实时反馈+失焦确认的双重验证体验

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