Blazor中如何检测表单字段验证状态 避免验证消息展示时字段跳动

方案1：纯CSS实现（推荐，改动最小） #

你完全不需要写逻辑判断，直接给Blazor内置的ValidationMessage组件统一加样式，固定最小高度即可，不管有没有验证消息都占用相同高度，从根源避免位移问题：

/* 适配Blazor默认验证消息类名，如果你用了Syncfusion的自定义样式可以调整对应类名 */
.validation-message {
    /* 高度和你单条验证消息的高度保持一致即可 */
    min-height: 1.2rem; 
    display: block;
    margin: 4px 0 0 0;
    font-size: 0.875rem;
    color: #dc3545;
}

修改后你的razor代码可以直接简化成如下写法，不需要加@if判断：

<div class="form-group input-group">
     <span class="has-float-label">
         <SfTextBox id="Owner" @bind-Value="template.Owner" class="form-control" placeholder="Owner" />
         <label for="Owner">Owner</label>
         <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>
     </span>
</div>

方案2：通过EditContext获取字段验证状态 #

如果你确实需要通过代码判断字段的验证状态，可以通过表单的EditContext实例获取对应字段的验证消息，判断是否有验证报错：

1. 首先在代码块中声明并初始化EditContext：

@code {
    private EditContext _editContext;
    // 你的表单模型，替换成你实际的模型类型
    private YourTemplateModel template = new();

    protected override void OnInitialized()
    {
        // 绑定模型到EditContext
        _editContext = new EditContext(template);
    }
}

2. 将EditForm的绑定从Model改为EditContext：

<EditForm EditContext="_editContext">
    <!-- 你的表单内容 -->
</EditForm>

3. 字段验证状态判断写法如下：

<div class="form-group input-group">
     <span class="has-float-label">
         <SfTextBox id="Owner" @bind-Value="template.Owner" class="form-control" placeholder="Owner" />
         <label for="Owner">Owner</label>
         @* 检测当前字段是否存在验证消息 *@
         @if (!_editContext.GetValidationMessages(() => template.Owner).Any())
         {
             <span style="min-height:1.2rem;display:block;">&nbsp;</span>
         }
         else
         {
             <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>
         }
     </span>
</div>

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