Weryfikowanie danych wejściowych użytkownika niejawnie bez konieczności pisania kodu weryfikacji

W formularzu należy podać instrukcje dla użytkownika witryny internetowej dotyczące prawidłowego wypełniania każdej wartości, ale należy również sprawdzić wprowadzone wartości. Platforma Blazor udostępnia proste narzędzia, które mogą wykonać tę walidację z minimalnym kodem niestandardowym.

W tej lekcji dowiesz się, jak dodawać adnotacje do modeli, aby platforma Blazor wiedziała, jakich danych oczekiwać. Dowiesz się również, jak skonfigurować formularz, aby prawidłowo weryfikował dane użytkownika i odpowiadał na nie.

Weryfikowanie danych wejściowych użytkownika w formularzach platformy Blazor

Podczas zbierania informacji od użytkownika witryny internetowej ważne jest, aby sprawdzić, czy ma to sens i czy znajduje się w odpowiedniej formie:

• Ze względów biznesowych: informacje o kliencie, takie jak numer telefonu lub szczegóły zamówienia, muszą być poprawne, aby zapewnić użytkownikom dobrą obsługę. Jeśli na przykład strona internetowa może wykryć nieprawidłowo sformułowany numer telefonu zaraz po wprowadzeniu go przez użytkownika, możesz zapobiec kosztownym opóźnieniom później.
• Ze względów technicznych: jeśli kod używa danych wejściowych formularza do obliczeń lub innego przetwarzania, nieprawidłowe dane wejściowe mogą powodować błędy i wyjątki.
• Ze względów bezpieczeństwa: złośliwi użytkownicy mogą próbować wprowadzać kod, wykorzystując pola wejściowe, które nie są sprawdzane.

Użytkownicy witryny internetowej znają reguły sprawdzania poprawności, które sprawdzają obecność i poprawny format wprowadzonych szczegółów. Wymagane pola są często oznaczone gwiazdką lub etykietą Wymagana. Jeśli pominięto wartość lub wprowadzili źle sformatowaną wartość, zostanie wyświetlony komunikat weryfikacji informujący o tym, jak rozwiązać problem. Komunikat weryfikacji może pojawić się, gdy użytkownik opuszcza pole lub po wybraniu przycisku Prześlij.

Oto przykładowy formularz, w którym użytkownik przesyła nieprawidłowe dane. W takim przypadku w dolnej części formularza są wyświetlane komunikaty sprawdzania poprawności, a nieprawidłowe pola są wyróżnione na czerwono. Ten formularz utworzysz w następnym ćwiczeniu:

Dobrym pomysłem jest zapewnienie, że komunikaty weryfikacji są tak pomocne, jak to możliwe. Nie zakładaj żadnej wiedzy od użytkownika; na przykład nie wszyscy znają format prawidłowego adresu e-mail.

Jeśli używasz składnika w rozwiązaniu EditForm Blazor, dostępne są uniwersalne opcje weryfikacji bez konieczności pisania złożonego kodu:

• W swoim modelu można użyć adnotacji danych dla każdej właściwości, aby przekazać Blazorowi, kiedy wartości są wymagane i w jakim formacie powinny być.
• W składniku EditForm dodaj składnik DataAnnotationsValidator , który sprawdza adnotacje modelu względem wprowadzonych wartości użytkownika.
• Użyj składnika ValidationSummary , aby wyświetlić podsumowanie wszystkich komunikatów weryfikacji w przesłanym formularzu.
• Użyj składnika ValidationMessage , aby wyświetlić komunikat weryfikacji dla określonej właściwości modelu.

Przygotowywanie modeli do weryfikacji

Zacznij od poinformowania składnika DataAnnotationsValidator , jak wyglądają prawidłowe dane. Ograniczenia walidacji są deklarowane przy użyciu atrybutów adnotacji w modelu danych. Rozważ taki przykład:

using  System.ComponentModel.DataAnnotations;

public class Pizza
{
    public int Id { get; set; }
    
    [Required]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00)]
    public decimal Price { get; set; }
}

Używamy tego modelu w postaci, która umożliwia personelowi Blazing Pizza dodawanie nowych pizz do menu. Zawiera atrybut, [Required] aby upewnić się, że Name wartości i Price są zawsze ukończone. Używa również atrybutu [Range] , aby sprawdzić, czy wprowadzona cena mieści się w rozsądnym zakresie dla pizzy. Na koniec używa atrybutu [EmailAddress] do sprawdzenia wprowadzonej ChefEmail wartości jest prawidłowym adresem e-mail.

Inne adnotacje, których można użyć w modelu, obejmują:

• [ValidationNever]: Użyj tej adnotacji, aby upewnić się, że pole nigdy nie jest uwzględniane w walidacji.
• [CreditCard]: Użyj tej adnotacji, jeśli chcesz zarejestrować prawidłowy numer karty kredytowej od użytkownika.
• [Compare]: Użyj tej adnotacji, jeśli chcesz upewnić się, że dwie właściwości w modelu są zgodne.
• [Phone]: użyj tej adnotacji, jeśli chcesz zarejestrować prawidłowy numer telefonu od użytkownika.
• [RegularExpression]: Użyj tej adnotacji, aby sprawdzić format wartości, porównując ją z wyrażeniem regularnym.
• [StringLength]: Użyj tej adnotacji, aby sprawdzić, czy długość wartości ciągu nie przekracza maksymalnej długości.
• [Url]: użyj tej adnotacji, jeśli chcesz zarejestrować prawidłowy adres URL od użytkownika.

Dodawanie składników walidacji do formularza

Aby skonfigurować formularz do używania walidacji adnotacji danych, najpierw upewnij się, że kontrolka danych wejściowych jest powiązana z właściwościami modelu. Następnie dodaj składnik DataAnnotationsValidator gdzieś w składniku EditForm . Aby wyświetlić komunikaty generowane przez walidację, użyj składnika ValidationSummary , który pokazuje wszystkie komunikaty sprawdzania poprawności dla wszystkich kontrolek w formularzu. Jeśli wolisz wyświetlić komunikaty sprawdzania poprawności obok każdej kontrolki, użyj wielu składników ValidationMessage . Pamiętaj, aby powiązać każdą kontrolkę ValidationMessage z określoną właściwością modelu przy użyciu atrybutu For :

@page "/admin/createpizza"

<h1>Add a new pizza</h1>

<EditForm Model="@pizza">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEmail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price)" />
</EditForm>

@code {
    private Pizza pizza = new();
}

Kontrolowanie poprawności formularza aplikacji

Platforma Blazor przeprowadza walidację w dwóch różnych przypadkach:

• Walidacja pola następuje, gdy użytkownik przechodzi do następnego pola. Walidacja pola gwarantuje, że użytkownik będzie wiedział o problemie walidacji w możliwie najkrótszym czasie.
• Walidacja modelu jest wykonywana po przesłaniu formularza przez użytkownika. Sprawdzanie poprawności modelu gwarantuje, że nieprawidłowe dane nie są przechowywane.

Jeśli sprawdzanie poprawności formularza zakończy się niepowodzeniem, komunikaty są wyświetlane w składnikach ValidationSummary i ValidationMessage . Aby dostosować te komunikaty, możesz dodać ErrorMessage atrybut do adnotacji danych dla każdego pola w modelu:

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
}

Wbudowane atrybuty weryfikacji są uniwersalne i można używać wyrażeń regularnych do sprawdzania pod kątem wielu rodzajów wzorców tekstu. Jeśli jednak masz określone lub nietypowe wymagania dotyczące walidacji, możesz nie być w stanie spełnić ich dokładnie z wbudowanymi atrybutami. W takich okolicznościach można utworzyć niestandardowy atrybut weryfikacji. Zacznij od utworzenia klasy, która dziedziczy z klasy ValidationAttribute i nadpisuje metodę IsValid:

public class PizzaBase : ValidationAttribute
{
    public string GetErrorMessage() => $"Sorry, that's not a valid pizza base.";

    protected override ValidationResult IsValid(
        object value, ValidationContext validationContext)
    {
        if (value != "Tomato" || value != "Pesto")
        {
            return new ValidationResult(GetErrorMessage());
        }

        return ValidationResult.Success;
    }
}

Teraz możesz użyć niestandardowego atrybutu weryfikacji, ponieważ używasz wbudowanych atrybutów w klasie modelu:

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(
        ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
    
    [PizzaBase]
    public string Base { get; set; }
}

Obsługa weryfikacji formularzy po stronie serwera po przesłaniu formularza

Gdy używasz EditForm składnika, trzy zdarzenia są dostępne do odpowiadania na przesyłanie formularza:

• OnSubmit: to zdarzenie jest uruchamiane za każdym razem, gdy użytkownik prześle formularz, niezależnie od wyników weryfikacji.
• OnValidSubmit: to zdarzenie jest uruchamiane, gdy użytkownik przesyła formularz, a ich dane wejściowe przechodzą walidację.
• OnInvalidSubmit: to zdarzenie jest uruchamiane, gdy użytkownik przesyła formularz, a ich dane wejściowe kończą się niepowodzeniem weryfikacji.

Jeśli używasz OnSubmit, pozostałe dwa zdarzenia nie są wyzwalane. Zamiast tego można użyć parametru EditContext , aby sprawdzić, czy przetwarzać dane wejściowe, czy nie. Użyj tego zdarzenia, gdy chcesz napisać własną logikę do obsługi przesyłania formularza:

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnSubmit=@HandleSubmission>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void HandleSubmission(EditContext context)
    {
        bool dataIsValid = context.Validate();
        if (dataIsValid)
        {
            // Store valid data here
        }
    }
}

Jeśli używasz poleceń OnValidSubmit i OnInvalidSubmit zamiast tego nie musisz sprawdzać stanu weryfikacji w ramach każdego programu obsługi zdarzeń:

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnValidSubmit=@ProcessInputData OnInvalidSubmit=@ShowFeedback>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void ProcessInputData(EditContext context)
    {
        // Store valid data here
    }
    
    void ShowFeedback(EditContext context)
    {
        // Take action here to help the user correct the issues
    }
}