.NET 8 Blazor交互式应用表单验证失效问题求助

你的验证失效和渲染模式无关，问题出在代码的几个关键细节上：

1. 提交按钮类型错误 #

你使用的是<button type="button">，这类按钮不会触发EditForm的内置验证流程。必须改用type="submit"，让EditForm自动处理验证逻辑，只有通过验证才会执行OnValidSubmit绑定的方法。

修改按钮代码：

<button type="submit" class="btn btn-primary rounded-pill">Guardar</button>

同时移除按钮上的@onclick="AddRiskLevel"，因为OnValidSubmit已经绑定了该方法，点击submit按钮会自动触发验证，验证通过后才会执行AddRiskLevel。

2. 值类型的[Required]属性无效 #

QsMin和QsMax是int值类型，默认值为0，永远不会为null，所以[Required]注解对它们完全不起作用。需要改成可空int类型int?，让空值状态能被识别；或者结合[Range]注解限制合法数值范围（比如要求大于0）。

修改DTO类：

public class LevelRiskDTO
{
     public int Id { get; set; }

     [Required(ErrorMessage = "Nivel是必填项")]
     public string Level { get; set; }

     [Required(ErrorMessage = "Qs Min是必填项")]
     public int? QsMin { get; set; }

     [Required(ErrorMessage = "Qs Max是必填项")]
     public int? QsMax { get; set; }
}

如果需要限制数值范围，可补充Range注解：

[Required(ErrorMessage = "Qs Min是必填项")]
[Range(1, int.MaxValue, ErrorMessage = "Qs Min必须大于0")]
public int? QsMin { get; set; }

3. 移除不必要的[SupplyParameterFromForm] #

在交互式服务器/WebAssembly模式下，[SupplyParameterFromForm]用于处理HTTP POST请求的表单绑定，但你的组件是交互式渲染，直接初始化模型即可，这个属性会干扰模型的验证状态。

修改@code部分：

@code {
   [Parameter] public int Id { get; set; }

   public LevelRiskDTO Risk { get; set; } = new();

   private void AddRiskLevel()
   {
      if (Id == 0)
          _service.CreateRisk(Risk);
   }
}

4. 补充缺失的ValidationMessage #

QsMin和QsMax对应的输入框没有添加ValidationMessage，验证错误无法显示，建议补上：

<div class="col-sm-3">
   <label for="QsMin" class="form-label">Qs Min.</label>
   <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
   <ValidationMessage For="@(() => Risk.QsMin)" class="text-danger"/>
</div>

<div class="col-sm-3">
   <label for="QsMax" class="form-label">Qs Max.</label>
   <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
   <ValidationMessage For="@(() => Risk.QsMax)" class="text-danger"/>
</div>

最终修改后的完整组件代码 #

DTO类 #

public class LevelRiskDTO
{
     public int Id { get; set; }

     [Required(ErrorMessage = "Nivel是必填项")]
     public string Level { get; set; }

     [Required(ErrorMessage = "Qs Min是必填项")]
     public int? QsMin { get; set; }

     [Required(ErrorMessage = "Qs Max是必填项")]
     public int? QsMax { get; set; }
} 

组件页面 #

@page "/Create/{Id:int}"
@rendermode InteractiveServer
@inject Service _service;
  
<EditForm Model="Risk" OnValidSubmit="AddRiskLevel">
   <DataAnnotationsValidator></DataAnnotationsValidator>
   <ValidationSummary class="text-danger"/>

    <div class="row g-3">

        <div class="col-sm-3">
           <label for="Level" class="form-label">Nivel</label>
           <InputText class="form-control" @bind-Value="Risk.Level" />
           <ValidationMessage For="@(() => Risk.Level)" class="text-danger"/>
        </div>

        <div class="col-sm-3">
           <label for="QsMin" class="form-label">Qs Min.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
           <ValidationMessage For="@(() => Risk.QsMin)" class="text-danger"/>
        </div>

        <div class="col-sm-3">
           <label for="QsMax" class="form-label">Qs Max.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
           <ValidationMessage For="@(() => Risk.QsMax)" class="text-danger"/>
        </div>

    </div>
    <div class="row g-3 pt-4">
        <div class="col-sm-1">
            <button type="submit" class="btn btn-primary rounded-pill">Guardar</button>
        </div>
    </div>
</EditForm>

@code {
   [Parameter] public int Id { get; set; }

   public LevelRiskDTO Risk { get; set; } = new();

   private void AddRiskLevel()
   {
      if (Id == 0)
          _service.CreateRisk(Risk);
   }
}

按照以上修改后，无论是交互式服务器还是WebAssembly模式，表单验证都会正常生效。

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