Blazor ValidationMessage 组件自定义错误信息

Blazor ValidationMessage 支持通过 DataAnnotations 特性、IValidatableObject 接口或手动操作 EditContext.ValidationMessageStore 三种方式实现自定义错误提示，同时可通过 CSS 或手动渲染控制样式与结构。

Blazor 的 ValidationMessage 组件默认只显示模型验证失败时的错误信息，但不支持直接传入自定义文本。要实现自定义错误提示（比如统一文案、带图标、多语言或动态内容），关键不是改组件本身，而是控制它“显示什么”——这需要从验证上下文和字段绑定入手。

用 DataAnnotations 自定义 ErrorMessage

最简单的方式是在模型属性上使用 [Required(ErrorMessage = "此项必填")] 等特性。Blazor 的 ValidationMessage 会自动读取该值：

[Required(ErrorMessage = "用户名不能为空")]
public string? Username { get; set; }

<ValidationMessage For="@(() => model.Username)" />

注意：必须确保模型属性有 setter（即使为 private），否则验证器无法设置错误；且需在页面中正确绑定 EditContext（如用 EditForm）。

用 IValidatableObject 或自定义验证器动态生成消息

当错误信息需根据其他字段、业务逻辑或用户输入实时变化时，可实现 IValidatableObject 接口：

• 在模型中重写 Validate 方法，返回 ValidationResult，其中 MemberNames 指定关联字段
• ValidationMessage 仍通过 For 绑定该字段，错误信息即来自你返回的 ValidationResult.ErrorMessage

例如：密码和确认密码不一致时，向 ConfirmPassword 字段添加自定义错误：“两次输入的密码不一致”。ValidationMessage For="@(() => model.ConfirmPassword)" 就会显示它。

绕过内置验证，手动注入错误（高级场景）

如果需要完全脱离 DataAnnotations（比如调用后端 API 校验后显示错误），可直接操作 EditContext 的 ValidationMessageStore：

• 获取 EditContext 实例（如通过 @ref 或 CascadingParameter）
• 调用 validationMessageStore.Add(new FieldIdentifier(model, nameof(model.Email)), "邮箱已被注册")
• 再调用 editContext.NotifyValidationStateChanged() 触发重绘

此时 <validationmessage for="@(() => model.Email)"></validationmessage> 就会显示你手动添加的那条消息，且与表单生命周期同步。

样式与结构自定义（非文字内容，但常被一起需要）

ValidationMessage 渲染为一个 <div class="validation-message">，内部是 <code><span></span> 包裹错误文本。你可以：

• 用 CSS 覆盖 .validation-message 类控制整体样式（颜色、边距、图标等）
• 用 :has(> span) 伪类判断是否有错误再加样式（现代浏览器支持）
• 不使用 ValidationMessage，改用 @if (editContext?.GetValidationMessages(field).Any() == true) 手动渲染任意 HTML（含图标、链接、多行提示）

这种方式自由度最高，适合需要复杂交互或无障碍增强的场景。

基本上就这些。核心思路是：Blazor 不让你“改组件”，但给你足够灵活的验证上下文和 API 去控制它“显示什么”和“怎么显示”。选哪种方式，取决于你的定制程度和维护成本权衡。