Blazor EditForm提交时如何添加自定义验证,是否有类似ModelState.AddModelError功能?
Blazor服务端完全提供了类似ModelState.AddModelError的能力,核心通过EditContext.AddFieldError方法实现,以下是具体实现方案:
修改后的完整代码示例
<!-- 把原来绑定Model改为绑定EditContext --> <EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <p> <label> Identifier: <InputText @bind-Value="starship.Identifier" /> </label> </p> <p> <label> Description (optional): <InputTextArea @bind-Value="starship.Description" /> </label> </p> <p> <label> Maximum Accommodation: <InputNumber @bind-Value="starship.MaximumAccommodation" /> </label> </p> <p> <label> Engineering Approval: <InputCheckbox @bind-Value="starship.IsValidatedDesign" /> </label> </p> <p> <label> Production Date: <InputDate @bind-Value="starship.ProductionDate" /> </label> <!-- 可选:字段级验证消息,只展示ProductionDate对应的错误 --> <ValidationMessage For="@(() => starship.ProductionDate)" /> </p> <button type="submit">Submit</button> </EditForm> @code { private Starship starship = new() { ProductionDate = DateTime.UtcNow }; // 声明EditContext实例,接管表单验证状态 private EditContext editContext; protected override void OnInitialized() { // 把业务模型和EditContext绑定 editContext = new EditContext(starship); } private void HandleValidSubmit() { Logger.LogInformation("HandleValidSubmit called"); // 先清理之前的自定义错误,避免重复展示 editContext.ClearValidationErrors(); // 执行业务校验逻辑 var limitDate = new DateTime(2021, 1, 1); if (starship.ProductionDate > limitDate) { // 等效于ModelState.AddModelError,为指定属性添加错误消息 var dateField = FieldIdentifier.Create(() => starship.ProductionDate); editContext.AddFieldError(dateField, "请选择2021年1月1日之前的日期"); // 通知界面更新验证状态 editContext.NotifyValidationStateChanged(); return; } // 全部校验通过后的业务逻辑 } }
补充说明
- 自定义错误会和数据注解的验证结果合并展示,同时支持全局
ValidationSummary和单字段ValidationMessage两种展示方式 - 如果需要添加不关联特定字段的全局错误,可以直接调用
editContext.AddValidationMessage()方法 - 该方案同时兼容Blazor服务端和Blazor WebAssembly
内容的提问来源于stack exchange,提问作者Sebastian
相关产品推荐
相关产品推荐

