Blazor WASM - 流畅的验证

Posted

技术标签:

【中文标题】Blazor WASM - 流畅的验证【英文标题】:Blazor WASM - Fluent Validation 【发布时间】:2021-09-17 19:49:24 【问题描述】:

我在自定义验证器中创建了以下规则:

  public class AddInvoiceParameterCommandValidator : AbstractValidator<AddInvoiceParameterCommand>

    public AddInvoiceParameterCommandValidator(IStringLocalizer<AddInvoiceParameterCommandValidator> localizer)
    
        RuleFor(p => p.Start)
            .Must(x => x > 0)
            .WithMessage(x => localizer["Start must be greater than 0!"]);

        RuleFor(p => p.Prefix)
            .Must(x => !string.IsNullOrWhiteSpace(x))
            .WithMessage(x => localizer["Prefix is required!"])
            .MaximumLength(5)
            .WithMessage(x => localizer["Length must not exceed"] + " 5 characters");

        RuleFor(p => p.End)
            .Must(x => x > 0)
            .WithMessage(x => localizer["End must be greater than 0!"]);

        RuleFor(x => x)
            .Must(StartMustBeLessThanEnd)
            .WithMessage(localizer["Start must be less than end!"]);

    

    private bool StartMustBeLessThanEnd(AddInvoiceParameterCommand parameter)
    
        return parameter.Start < parameter.End;
    

我对 Start 和 End 没有问题,因为我在前端表单中收到消息,当它们不大于 0 时。 问题是,对于“开始必须小于结束”规则,如何在前端显示消息?

这是我当前使用的模态代码:(Blazor WASM + MudBlazor)

@inject Microsoft.Extensions.Localization.IStringLocalizer<AddInvoiceParameterModal> _localizer

    
<EditForm Model="@AddInvoiceParameterModel" OnValidSubmit="SaveAsync">
    <FluentValidationValidator @ref="_fluentValidationValidator" />
    <MudDialog>
        <TitleContent>
              <MudText Typo="Typo.h6">
                        <MudIcon Icon="@Icons.Material.Filled.Add" Class="mr-3 mb-n1" />
                        @_localizer["Add Parameter"]
                    </MudText>
        </TitleContent>
        <DialogContent>
            <MudGrid>
                <MudItem xs="12" md="6">
                    <MudTextField T="int" For="@(() => AddInvoiceParameterModel.Start)" @bind-Value="AddInvoiceParameterModel.Start" Label="@_localizer["Start"]" />
                </MudItem>
                <MudItem xs="12" md="6">
                    <MudTextField T="int" For="@(() => AddInvoiceParameterModel.End)" @bind-Value="AddInvoiceParameterModel.End" Label="@_localizer["End"]" />
                </MudItem>
                <MudItem xs="12" md="6">
                    <MudTextField T="string" For="@(() => AddInvoiceParameterModel.Prefix)" @bind-Value="AddInvoiceParameterModel.Prefix" Label="@_localizer["Prefix"]" />
                </MudItem>
            </MudGrid>
        </DialogContent>
        <DialogActions>
            <MudButton DisableElevation Variant="Variant.Filled" OnClick="Cancel">@_localizer["Cancel"]</MudButton>
                <MudButton DisableElevation Variant="Variant.Filled" ButtonType="ButtonType.Submit" Disabled="@(!Validated)" Color="Color.Success">@_localizer["Save"]</MudButton>
        </DialogActions>
    </MudDialog>
</EditForm>

【问题讨论】:

【参考方案1】:

您可以这样做以显示带有 start 的消息:

RuleFor(p => p.Start)
    .Must(x => x > 0).WithMessage(x => localizer["Start must be greater than 0!"])
    .Must(StartMustBeLessThanEnd).WithMessage(localizer["Start must be less than end!"]);

或者您可以添加一个摘要控件来显示与属性无关的消息:

<EditForm Model="@AddInvoiceParameterModel" OnValidSubmit="SaveAsync">
    <FluentValidationValidator @ref="_fluentValidationValidator" />

    [put this where you want displayed ]
    <Microsoft.AspNetCore.Components.Forms.ValidationSummary />

【讨论】:

嗯,它可以工作,但有一些缺点: 解决方案 1:我必须更改函数签名,因为现在它应该接收对象本身和 int(start) 参数。解决方案 2:它提供了所有的验证消息,但现在其中 3 个是双倍的。它们显示在每个引用的表单中,并且都显示在验证摘要中。我目前选择了解决方案 1。谢谢!

以上是关于Blazor WASM - 流畅的验证的主要内容,如果未能解决你的问题,请参考以下文章

使用 Blazor wasm Bearer Token 进行 SignalR 身份验证

未注册身份验证 AuthenticationStateProvider 的 Blazor Wasm 托管预渲染

IdentityServerBuilderConfigurationExtension 中的 Blazor WASM 托管身份验证空引用异常

使用通过 Blazor WASM 使用 Windows 身份验证的 WebAPI

升级到 .net 6 时托管的 Blazor WASM 身份验证中断

使用身份验证托管的 Blazor Wasm 上出现 Azure 500 错误