Валидация на основе аннотаций данных

Последнее обновление: 30.11.2023

Применение компонента EditForm позволяет легко добавить валидацию к форме. Для валидации данных нам нужен валидатор - объект, который определяет, как проверять корректность данных. По умолчанию фреймворк Blazor предоставляет валидатор аннотаций данных - компонент DataAnnotationsValidator, который прикрепляет к форме поддержку валидации с помощью аннотаций данных. Как и в целом в .NET, аннотации данных в виде атрибутов позволяют установить правила валидации свойств модели.

Пусть у нас в проекте есть класс Person, который представляет данные, и два компонента - App и Home:

Валидация в компонентах Blazor и ASP.NET

Пусть класс Person применяет атрибуты валидации:

using System.ComponentModel.DataAnnotations;

public class Person
{
    [Required]
    [StringLength(20, MinimumLength =2)]
    public string? Name { get; set; }
    [Required]
    [Range(1,110)]
    public int Age { get; set; }
}

В данном случае класс Person определяет два свойства - Name и Age. Оба этих свойства обязательно должны иметь некоторое значение, для чего к ним применяется атриубут [Required]. Кроме того, размер строки в Name должен содержать от 2 до 20 символов (атрибут [StringLength(20, MinimumLength =2)]), а свойство Age может иметь значение от 1 до 110 (атрибут [Range(1,110)])

В Blazor мы можем использовать все те атрибуты валидации, что и в целом в .NET - Атрибуты валидации в .NET

Пусть компонент App представляет корневой компонент и просто выводит на страницу компонент Home:

@page "/"

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
</head>
<body>
    <Home />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

А в компоненте Home определим следующий код:

@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Forms
@rendermode RenderMode.InteractiveServer

<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" />
    </p>
    <button type="submit">Submit</button>
</EditForm>
<h3>@message</h3>

@code {
    string message = "";
    Person person = new();
    void Submit()
    {
        message = $"Name: {person.Name};   Age: {person.Age}";
    }
}

Форма привязана к объекту person. Для валидации этих данных этого объекта в начале формы определяется компонент <DataAnnotationsValidator>. Далее для вывода ошибок определяется встроенный компонент <ValidationSummary>

При вводе некорректных данных в компоненте ValidationSummary отобразятся сообщения о некорректном вводе:

Валидация данных в форме EditForm в компонентах Blazor в приложении C#

Стоит отметить, что даже при некорректном вводе мы можем нажать на кнопку отправки, и обработчик OnSubmit также будет выполняться.

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

using System.ComponentModel.DataAnnotations;

public class Person
{
    [Required (ErrorMessage="Необходимо ввести имя")]
    [StringLength(20, MinimumLength =2, ErrorMessage = "Длина имени должна быть от {2} до {1} символов")]
    public string? Name { get; set; }
    [Required (ErrorMessage = "Необходимо ввести возраст")]
    [Range(1,110, ErrorMessage = "Возраст должен находиться в диапазоне от {1} до {2}")]
    public int Age { get; set; }
}

Через плейсхолдеры {1} и {2} в сообщениях об оишбках можно получить значения свойств атрибутов (минимальное и максимальное значения). Соответственно теперь сообщения об ошибках будут выглядить иначе.

Настройка сообщений об ошибках валидации данных в компонентах Blazor в приложении C#

Как можно увидеть на скриншоте, для свойства Age также выводится некоторое сообщение о неудачном парсинге в тип int. Подобные сообщения также применяются при ошибке парсинга в тип DateTime (компонент InputDate) и такие сообщения устанавливаются не в атрибутах валидации, а с помощью свойства ParsingErrorMessage. Например, изменим поле ввода возраста:

<p>
    Age:<br />
    <InputNumber id="age" @bind-Value="person.Age" ParsingErrorMessage="Введите число" />
</p>

Теперь сообщение об ошибке парсинга задается с помощью атрибута ParsingErrorMessage:

Настройка сообщений об ошибках парсинга в компонентах Blazor в приложении C#

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850