Блог

Я создал красивую регистрационную форму с помощью MudBlazor.

      <MudCard Class="signup-form">
        <MudCardContent>
           <form>
            <MudTextField Label="Username" />
            <MudTextField Label="Email" />
            <MudTextField Label="Password" />
            <MudTextField Label="Repeat password" />
          </form>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary">Sign up</MudButton>
        </MudCardActions>
    </MudCard>
  

Но как я могу показать ошибки проверки, если пользовательский ввод недостаточен или неправильный? Не удалось найти информацию о том, как это сделать в MudBlazor.

Проверка формы хорошо документирована в документации формы MudBlazor. Вот как вы это делаете с помощью встроенного механизма проверки Blazor, который, вероятно, является самым простым для вашего варианта использования:

 <EditForm Model="@model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudCard Class="demo-form">
        <MudCardContent>
            <MudTextField Label="Username" HelperText="Max. 8 characters" @bind-Value="model.Username" For="@(() => model.Username)" />
            <MudTextField Label="Email" @bind-Value="model.Email" For="@(() => model.Email)" />
            <MudTextField Label="Password" HelperText="Choose a strong password" @bind-Value="model.Password" For="@(() => model.Password)" InputType="InputType.Password" />
            <MudTextField Label="Password" HelperText="Repeat the password" @bind-Value="model.Password2" For="@(() => model.Password2)" InputType="InputType.Password" />
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="demo-form-button">Register</MudButton>
        </MudCardActions>
    </MudCard>    
</EditForm>

@code {
    RegisterAccountForm model = new RegisterAccountForm();

    public class RegisterAccountForm
    {
        [Required]
        [StringLength(8, ErrorMessage = "Name length can't be more than 8.")]
        public string Username { get; set; }

        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Required]
        [StringLength(30, ErrorMessage = "Password must be at least 8 characters long.", MinimumLength = 8)]
        public string Password { get; set; }

        [Required]
        [Compare(nameof(Password))]
        public string Password2 { get; set; }

    }

    private void OnValidSubmit(EditContext context)
    {
        // register the user
    }

}