Blazor Forms и проверка

Начало работы с Blazor Forms and Validations.

Сегодня мы рассмотрим Blazor Forms и Validation, теперь для простоты мы будем придерживаться того, что есть в официальной документации. К настоящему времени я предполагаю, что у вас уже есть все настройки зависимостей Blazor. Мы начнем с создания нового проекта Blazor.

Примечание. Формы и сценарии проверки могут меняться с каждым предварительным выпуском.

Blazor использует аннотацию данных для определения логики проверки. Вот класс, который я создал для проверки регистрации пользователя.

using System.ComponentModel.DataAnnotations; 
using BlazorValidation.Shared.Models; 
namespace BlazorValidation.Shared.Validations { 
public class SignUpFormValidation { 
[Required(ErrorMessage ="first name is required.")] [StringLength(10, ErrorMessage = "first name is too long.")] 
public string FirstName { get; set; } 
[Required(ErrorMessage = "last name is required.")] [StringLength(10, ErrorMessage = "last name is too long.")] 
public string LastName { get; set; } 
[Required(ErrorMessage = "age is required.")] 
[Range(13,200, ErrorMessage ="must be 13 or older")] 
public int Age { get; set; } 
[Required(ErrorMessage = "username is required.")] 
[MinLength(4, ErrorMessage = "username must be at least 4 characters")] 
public string Username { get; set; } 
[Required(ErrorMessage = "email is required.")] 
[EmailAddress()] 
public string Email { get; set; } 
[Required(ErrorMessage = "password is required.")] 
[MinLength(8, ErrorMessage = "password must be atleast 8 characters")] 
[DataType(DataType.Password)] 
public string Password { get; set; } = string.Empty; [Required(ErrorMessage = "re-type password is required.")] [Compare(nameof(Password), ErrorMessage = "password dosent match")] public string ConfirmPassword { get; set; } = string.Empty; 
public User GetRegisteredUser() { 
return new User { FirstName =FirstName, LastName = LastName, Age =Age, Username = Username, Email = Email, Password = Password, ConfirmPassword =ConfirmPassword }; 
} 
} 
}

Мы указали проверку, которую мы хотим иметь для каждого свойства, вы также можете указать сообщение об ошибке, которое вы хотите отобразить.

Теперь мы создаем страницу бритвы, сюда мы добавим форму, которую Blazor определяет с помощью компонента «EditForm». Вот «EditForm», который использует класс проверки, который мы только что создали.

<h4 class="mb-3">Sign Up</h4> <EditForm class="needs-validation" Model="@_validation" onValidSubmit="@OnValidSubmit" onInvalidSubmit="@OnInvalidSubmit" novalidate> <DataAnnotationsValidator /> @*<ValidationSummary />*@ <div class="row"> <div class="col-md-6 mb-3"> <label for="firstName">First Name</label> <InputText type="text" class="form-control" id="firstName" @bind-value="_validation.FirstName" placeholder="" /> <ValidationMessage For="@(() => @_validation.FirstName)" /> </div> <div class="col-md-6 mb-3"> <label for="lastName">Last Name</label> <InputText type="text" class="form-control" id="lastName" @bind-value="_validation.LastName" placeholder="" /> <ValidationMessage For="@(() => @_validation.LastName)" /> </div> </div> <div class="mb-3"> <label for="username">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"></span> </div> <InputText type="text" @bind-value="_validation.Username" class="form-control" id="username" placeholder="Username" /> <ValidationMessage For="@(() => @_validation.Username)" /> </div> </div> <div class="mb-3"> <label for="username">Age</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"></span> </div> <InputNumber type="text" @bind-value="_validation.Age" class="form-control" id="age" placeholder="18" /> <ValidationMessage For="@(() => @_validation.Age)" /> </div> </div> <div class="mb-3"> <label for="email">Email</label> <InputText type="email" class="form-control" @bind-value="_validation.Email" id="email" placeholder="you@example.com" /> <ValidationMessage For="@(() => @_validation.Email)" /> </div> <div class="mb-3"> <label for="password">Password</label> <InputText type="password" class="form-control" @bind-value="_validation.Password" id="password" placeholder="********" /> <ValidationMessage For="@(() => @_validation.Password)" /> </div> <div class="mb-3"> <label for="confirm-password">Confirm Password</label> <InputText type="password" class="form-control" id="confirm-password" @bind-value="_validation.ConfirmPassword" placeholder="********" /> <ValidationMessage For="@(() => @_validation.ConfirmPassword)" /> </div> <hr class="mb-4"> <button class="btn btn-primary btn-lg btn-block" type="submit">Sign Up</button> </EditForm> @code { private SignUpFormValidation _validation = new SignUpFormValidation(); //This will trigger when the form was valid private void OnValidSubmit() { Console.WriteLine("Submit Valid"); } //This will trigger when the form was invalid public void OnInvalidSubmit() { Console.WriteLine("Submit Invalid"); }

Давайте разберем, что находится на EditForm

  • Модель — это логика проверки, которую мы создали.
  • OnValidSubmit — это будет вызвано, когда отправка действительна
  • OnInvalidSubmit — будет вызываться, когда отправка недействительна
  • OnSubmit — это будет вызываться при отправке пользователем (если вы решите использовать Onsubmit, вам нужно будет проверить проверку самостоятельно. Поскольку OnValidSubmit и OnInvalidSubmit можно использовать, если вы используете OnSubmit)
  • DataAnnotationsValidator — подключает поддержку проверки с помощью аннотаций данных.
  • ValidationSummary — Суммирует сообщения проверки
  • ValidationSummary — будет показывать сообщение проверки только из определенного поля.

Blazor уже поставляется с компонентами, поддерживающими получение и проверку пользовательского ввода:

  • InputText — он будет отображать ‹input›
  • InputTextArea — будет отображаться ‹textarea›
  • InputSelect — он будет отображать ‹select›
  • InputNumber — будет отображаться ‹input type="number"›
  • InputCheckbox — будет отображаться ‹input type="checkbox"›
  • InputDate — будет отображаться ‹input type="date"›

Компоненты ввода обеспечивают поведение по умолчанию для проверки при редактировании и изменении их класса CSS для отражения состояния поля. Некоторые компоненты включают полезную логику синтаксического анализа. Например, InputDate и InputNumber изящно обрабатывают неразборчивые значения, регистрируя их как ошибки проверки. Типы, которые могут принимать нулевые значения, также поддерживают нулевые значения целевого поля.

Вот результат нашей регистрационной формы

Вы можете видеть, что компонент EditForm заботится о стиле формы.

Это даст вам общее представление о проверке регистрационной формы. Чтобы проверить это, я создал настоящий репозиторий, в котором есть все, что я покажу вам в этом руководстве, и есть страница входа для входа после регистрации.

Если вам нужна помощь в работе с Blazor, оставьте комментарий, и я с радостью постараюсь помочь вам чем смогу. Чтобы узнать больше подобных сообщений в блоге, посетите nativoplus.studio/blog

Первоначально опубликовано на https://nativoplus.studio 22 июля 2019 г.