Implicitní ověření vstupu uživatele bez psaní ověřovacího kódu
Ve formuláři byste měli poskytnout uživateli webu pokyny, jak správně dokončit každou hodnotu, ale měli byste také zkontrolovat hodnoty, které zadá. Blazor poskytuje jednoduché nástroje, které můžou toto ověřování provádět s minimálním vlastním kódem.
V této lekci se dozvíte, jak anotovat modely, aby Blazor věděl, jaká data mají očekávat, a jak nakonfigurovat formulář tak, aby ověřoval uživatelská data a správně reagoval na ně.
Ověření uživatelského vstupu ve formulářích Blazor
Když shromáždíte informace od uživatele webu, je důležité zkontrolovat, že to dává smysl a že je ve správném tvaru:
- Z obchodních důvodů: Informace o zákazníci, jako je telefonní číslo nebo podrobnosti objednávky, musí být správné, aby uživatelům poskytly dobrou službu. Pokud například vaše webová stránka může odhalit poškozené telefonní číslo, jakmile ho uživatel zadá, můžete předejít nákladným zpožděním později.
- Z technických důvodů: Pokud kód používá vstup formuláře pro výpočty nebo jiné zpracování, může nesprávný vstup způsobit chyby a výjimky.
- Z bezpečnostních důvodů: Uživatelé se zlými úmysly se mohou pokusit vložit kód zneužitím vstupních polí, která nejsou zaškrtnutá.
Uživatelé webu znají ověřovací pravidla, která kontrolují přítomnost a správný formát zadaných podrobností. Povinná pole jsou často označená hvězdičkou nebo povinným popiskem. Pokud hodnotu vynechá nebo zadá špatně naformátovanou hodnotu, zobrazí se jim ověřovací zpráva s pokyny, jak problém správně umístit. Ověřovací zpráva se může zobrazit, když uživatel na kartě mimo pole nebo když klikne na tlačítko Odeslat .
Tady je příklad formuláře, ve kterém uživatel odeslal neplatná data. V tomto případě jsou v dolní části formuláře ověřovací zprávy a neplatná pole jsou zvýrazněná červeně. Tento formulář vytvoříte v dalším cvičení:
Je vhodné, aby ověřovací zprávy byly co nejužitečnější. Nepředpokládejte žádné znalosti od uživatele; Například ne každý zná formát platné e-mailové adresy.
Při použití komponenty v Blazoru máte k dispozici všestranné možnosti ověřování bez psaní složitého EditForm kódu:
- V modelu můžete pomocí datových poznámek pro každou vlastnost sdělit Blazoru, kdy jsou hodnoty povinné a v jakém formátu by měly být.
- Do své
EditFormkomponenty přidejte komponentu DataAnnotationsValidator , která kontroluje poznámky modelu vůči zadaným hodnotám uživatele. - Komponentu ValidationSummary použijte, když chcete zobrazit souhrn všech ověřovacích zpráv v odeslaném formuláři.
- Komponentu ValidationMessage použijte, pokud chcete zobrazit ověřovací zprávu pro konkrétní vlastnost modelu.
Příprava modelů na ověření
Začněte tím, že komponentě DataAnnotationsValidator řeknete, jak vypadají platná data. Omezení ověřování deklarujete pomocí atributů poznámek v datovém modelu. Podívejte se na tento příklad:
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; }
}
Tento model použijeme ve formě, která umožňuje, aby pracovníci Blazing Pizza přidali do nabídky nové pizzy. [Required] Zahrnuje atribut, který zajistí, že Name se hodnoty a Price hodnoty vždy dokončí. Používá [Range] také atribut ke kontrole, že zadaná cena je v rozumném rozsahu pro pizzu. Nakonec pomocí atributu [EmailAddress] zkontroluje zadaná ChefEmail hodnota platnou e-mailovou adresou.
Mezi další poznámky, které můžete použít v modelu, patří:
[ValidationNever]: Tuto poznámku použijte, pokud chcete zajistit, aby se pole nikdy nezahrnuly do ověření.[CreditCard]: Tuto poznámku použijte, pokud chcete zaznamenat platné číslo platební karty od uživatele.[Compare]: Tuto poznámku použijte, pokud chcete zajistit, aby se dvě vlastnosti modelu shodovaly.[Phone]: Tuto poznámku použijte, pokud chcete zaznamenat platné telefonní číslo od uživatele.[RegularExpression]: Tato poznámka slouží ke kontrole formátu hodnoty porovnáním s regulárním výrazem.[StringLength]: Pomocí této poznámky zkontrolujte, jestli délka řetězcové hodnoty nepřekračuje maximální délku.[Url]: Tuto poznámku použijte, pokud chcete zaznamenat platnou adresu URL od uživatele.
Poznámka:
Regulární výrazy se běžně používají k porovnání řetězců se vzory a také k úpravě řetězců. Můžete je použít k definování vlastních formátů, které musí být v souladu s hodnotami formuláře. Další informace o regulárních výrazech v .NET najdete v tématu Regulární výrazy .NET.
Přidání ověřovacích komponent do formuláře
Pokud chcete formulář nakonfigurovat tak, aby používal ověřování datových poznámek, nejprve se ujistěte, že jste vstupní ovládací prvek sváželi s vlastnostmi modelu. Potom přidejte komponentu DataAnnotationsValidator někam do EditForm komponenty. Chcete-li zobrazit zprávy, které ověření generuje, použijte komponentu ValidationSummary , která zobrazuje všechny ověřovací zprávy pro všechny ovládací prvky ve formuláři. Pokud dáváte přednost zobrazení ověřovacích zpráv vedle každého ovládacího prvku, použijte více komponent ValidationMessage . Nezapomeňte spojit každý ValidationMessage ovládací prvek s konkrétní vlastností modelu pomocí atributu 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();
}
Řízení ověření formuláře aplikace
Blazor provádí ověřování ve dvou různých časech:
- Ověření pole se provede, když uživatel na kartě mimo pole. Ověření pole zajišťuje, aby uživatel věděl o problému s ověřením co nejdříve.
- Ověření modelu se spustí, když uživatel odešle formulář. Ověření modelu zajišťuje, že se neukládají neplatná data.
Pokud formulář selže s ověřením, zprávy se zobrazí v komponentách ValidationSummary a ValidationMessage . Pokud chcete tyto zprávy přizpůsobit, můžete přidat ErrorMessage atribut do datové poznámky pro každé pole v 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; }
}
Předdefinované ověřovací atributy jsou všestranné a pomocí regulárních výrazů můžete kontrolovat různé druhy textových vzorů. Pokud ale máte specifické nebo neobvyklé požadavky na ověření, možná je nebudete moct splňovat přesně pomocí předdefinovaných atributů. Za těchto okolností můžete vytvořit vlastní ověřovací atribut. Začněte vytvořením třídy, která dědí z ValidationAttribute třídy a přepíše IsValid metoda:
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;
}
}
Teď můžete použít vlastní ověřovací atribut při použití předdefinovaných atributů ve třídě 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; }
}
Zpracování ověření formulářů na straně serveru při odeslání formuláře
Při použití EditForm komponenty jsou k dispozici tři události pro reakci na odeslání formuláře:
OnSubmit: Tato událost se aktivuje vždy, když uživatel odešle formulář bez ohledu na výsledky ověření.OnValidSubmit: Tato událost se aktivuje, když uživatel odešle formulář a jeho vstup projde ověřením.OnInvalidSubmit: Tato událost se aktivuje, když uživatel odešle formulář a jeho vstup selže s ověřením.
Pokud použijete OnSubmit, ostatní dvě události se neaktivují. Místo toho můžete pomocí parametru EditContext zkontrolovat, jestli se mají zpracovat vstupní data, nebo ne. Tuto událost použijte, když chcete napsat vlastní logiku pro zpracování odeslání formuláře:
@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
}
}
}
Pokud používáte OnValidSubmit a OnInvalidSubmit místo toho nemusíte kontrolovat stav ověření v rámci každé obslužné rutiny události:
@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
}
}