Blazor Server中如何接收Guid类型输入并实现内置验证

针对Blazor Server里Guid字段无法通过原生组件获得内置验证的问题，这里提供三种可行方案：

1. 自定义InputGuid组件（推荐） #

继承Blazor的InputBase<Guid>实现专门的Guid输入组件，内置格式验证和必填校验。

组件代码（InputGuid.razor） #

@inherits InputBase<Guid>

<input @bind="CurrentValueAsString" class="@CssClass" />

@code {
    protected override bool TryParseValueFromString(string? value, out Guid result, out string validationErrorMessage)
    {
        if (string.IsNullOrWhiteSpace(value))
        {
            // 处理必填验证
            if (FieldIdentifier.Metadata.IsRequired)
            {
                validationErrorMessage = $"The {FieldIdentifier.FieldName} field is required.";
                result = Guid.Empty;
                return false;
            }
            result = Guid.Empty;
            validationErrorMessage = string.Empty;
            return true;
        }

        if (Guid.TryParse(value, out result))
        {
            validationErrorMessage = string.Empty;
            return true;
        }
        else
        {
            validationErrorMessage = $"The {FieldIdentifier.FieldName} field must be a valid GUID.";
            return false;
        }
    }
}

在EditForm中使用 #

<EditForm Model="@TradeDatum" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group">
        <label>Provider Dynamics ID:</label>
        <InputGuid @bind-Value="TradeDatum.ProviderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.ProviderDynamicsId)" />
    </div>

    <div class="form-group">
        <label>Trader Dynamics ID:</label>
        <InputGuid @bind-Value="TradeDatum.TraderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.TraderDynamicsId)" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ObfuscatingTradeDatum TradeDatum { get; set; } = new();

    private void HandleValidSubmit()
    {
        // 处理表单提交逻辑
    }

    public class ObfuscatingTradeDatum
    {
        [Required(ErrorMessage = "Provider Dynamics ID is required")]
        public Guid ProviderDynamicsId { get; set; }

        [Required(ErrorMessage = "Trader Dynamics ID is required")]
        public Guid TraderDynamicsId { get; set; }
    }
}

2. 使用InputText配合正则表达式验证 #

如果不想自定义组件，可以用InputText绑定Guid字段，通过正则表达式验证格式，配合[Required]注解实现必填校验。

实体类修改 #

public class ObfuscatingTradeDatum
{
    [Required(ErrorMessage = "Provider Dynamics ID is required")]
    [RegularExpression(@"^[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}$", 
        ErrorMessage = "Provider Dynamics ID must be a valid GUID")]
    public Guid ProviderDynamicsId { get; set; }

    [Required(ErrorMessage = "Trader Dynamics ID is required")]
    [RegularExpression(@"^[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}$", 
        ErrorMessage = "Trader Dynamics ID must be a valid GUID")]
    public Guid TraderDynamicsId { get; set; }
}

表单中使用InputText #

<EditForm Model="@TradeDatum" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group">
        <label>Provider Dynamics ID:</label>
        <InputText @bind-Value="TradeDatum.ProviderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.ProviderDynamicsId)" />
    </div>

    <div class="form-group">
        <label>Trader Dynamics ID:</label>
        <InputText @bind-Value="TradeDatum.TraderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.TraderDynamicsId)" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

3. 手动验证（轻量场景） #

如果只需要简单验证，可以通过EditContext手动监听字段变化，或者在提交时校验Guid有效性。

提交时手动验证 #

<EditForm Model="@TradeDatum" OnValidSubmit="HandleValidSubmit" EditContext="@_editContext">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group">
        <label>Provider Dynamics ID:</label>
        <input @bind="TradeDatum.ProviderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.ProviderDynamicsId)" />
    </div>

    <div class="form-group">
        <label>Trader Dynamics ID:</label>
        <input @bind="TradeDatum.TraderDynamicsId" />
        <ValidationMessage For="@(() => TradeDatum.TraderDynamicsId)" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ObfuscatingTradeDatum TradeDatum { get; set; } = new();
    private EditContext? _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(TradeDatum);
        base.OnInitialized();
    }

    private void HandleValidSubmit()
    {
        var isValid = true;

        // 验证ProviderDynamicsId
        if (TradeDatum.ProviderDynamicsId == Guid.Empty)
        {
            _editContext?.NotifyValidationStateChanged();
            _editContext?.AddValidationError(() => TradeDatum.ProviderDynamicsId, "Provider Dynamics ID is required");
            isValid = false;
        }

        // 验证TraderDynamicsId
        if (TradeDatum.TraderDynamicsId == Guid.Empty)
        {
            _editContext?.NotifyValidationStateChanged();
            _editContext?.AddValidationError(() => TradeDatum.TraderDynamicsId, "Trader Dynamics ID is required");
            isValid = false;
        }

        if (!isValid) return;

        // 处理提交逻辑
    }
}

注意：手动验证需要自己处理错误消息的添加和状态更新，适合简单场景。

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