Verifiera användarindata implicit utan att skriva verifieringskod
- 5 minuter
I ett formulär bör du ge instruktioner till webbplatsanvändaren om hur varje värde ska slutföras korrekt, men du bör också kontrollera de värden som de anger. Blazor innehåller enkla verktyg som kan utföra den här valideringen med minsta möjliga anpassade kod.
I den här lektionen lär du dig att kommentera modeller så att Blazor vet vilka data som kan förväntas. Du får också lära dig hur du konfigurerar ett formulär så att det validerar och svarar på användardata korrekt.
Verifiera användarindata i Blazor-formulär
När du samlar in information från en webbplatsanvändare är det viktigt att kontrollera att den är lämplig och att den är i rätt form:
- Av affärsskäl: Kundinformation, till exempel ett telefonnummer eller beställningsinformation, måste vara korrekt för att ge bra service till användarna. Om din webbsida till exempel kan upptäcka ett felaktigt telefonnummer så snart användaren anger det kan du förhindra kostsamma fördröjningar senare.
- Av tekniska skäl: Om din kod använder formulärindata för beräkningar eller annan bearbetning kan felaktiga indata orsaka fel och undantag.
- Av säkerhetsskäl: Skadliga användare kan försöka mata in kod genom att utnyttja indatafält som inte är markerade.
Webbplatsanvändare är bekanta med valideringsregler som söker efter förekomsten och rätt format för den information de anger. Obligatoriska fält markeras ofta med en asterisk eller en obligatorisk etikett. Om de utelämnar ett värde eller anger ett dåligt formaterat värde ser de ett valideringsmeddelande som instruerar dem om hur problemet ska åtgärdas. Verifieringsmeddelandet kan visas när användaren flikar ut ur ett fält eller när de väljer knappen Skicka .
Här är ett exempelformulär där användaren skickar ogiltiga data. I det här fallet finns det valideringsmeddelanden längst ned i formuläret och ogiltiga fält är markerade i rött. Du skapar det här formuläret i nästa övning:
Det är en bra idé att göra valideringsmeddelanden så användbara som möjligt. Anta inte några kunskaper från användaren. Till exempel vet inte alla formatet för en giltig e-postadress.
När du använder komponenten EditForm i Blazor har du tillgång till mångsidiga valideringsalternativ utan att skriva komplex kod:
- I din modell kan du använda dataanteckningar mot varje egenskap för att tala om för Blazor när värden krävs och vilket format de ska vara i.
- I komponenten
EditFormlägger du till komponenten DataAnnotationsValidator , som kontrollerar modellanteckningarna mot användarens angivna värden. - Använd komponenten ValidationSummary när du vill visa en sammanfattning av alla valideringsmeddelanden i ett skickat formulär.
- Använd komponenten ValidationMessage när du vill visa verifieringsmeddelandet för en specifik modellegenskap.
Förbereda modeller för validering
Börja med att tala om för DataAnnotationsValidator-komponenten hur giltiga data ser ut. Du deklarerar verifieringsbegränsningar med hjälp av anteckningsattribut i datamodellen. Ta det här exemplet:
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; }
}
Vi använder den här modellen i ett formulär som gör det möjligt för Blazing Pizza-personal att lägga till nya pizzor på menyn. Den innehåller [Required] attributet för att säkerställa att Name värdena och Price alltid slutförs. Det använder [Range] också attributet för att kontrollera att det angivna priset ligger inom ett förnuftigt intervall för en pizza. Slutligen används [EmailAddress] attributet för att kontrollera att det ChefEmail angivna värdet är en giltig e-postadress.
Andra anteckningar som du kan använda i en modell är:
-
[ValidationNever]: Använd den här kommentaren när du vill se till att fältet aldrig tas med i valideringen. -
[CreditCard]: Använd den här kommentaren när du vill registrera ett giltigt kreditkortsnummer från användaren. -
[Compare]: Använd den här kommentaren när du vill se till att två egenskaper i modellen matchar. -
[Phone]: Använd den här kommentaren när du vill registrera ett giltigt telefonnummer från användaren. -
[RegularExpression]: Använd den här kommentaren för att kontrollera formatet för ett värde genom att jämföra det med ett reguljärt uttryck. -
[StringLength]: Använd den här kommentaren för att kontrollera att längden på ett strängvärde inte överskrider en maximal längd. -
[Url]: Använd den här kommentaren när du vill registrera en giltig URL från användaren.
Note
Reguljära uttryck används ofta för att jämföra strängar med mönster och även för att ändra strängar. Du kan använda dem för att definiera anpassade format som formulärvärdena måste överensstämma med. Mer information om reguljära uttryck i .NET finns i reguljära .NET-uttryck.
Lägga till valideringskomponenter i formuläret
Om du vill konfigurera formuläret för att använda validering av dataanteckning kontrollerar du först att indatakontrollen är bunden till modellegenskaperna. Lägg sedan till Komponenten DataAnnotationsValidator någonstans i komponenten EditForm . Om du vill visa de meddelanden som verifieringen genererar använder du komponenten ValidationSummary , som visar alla valideringsmeddelanden för alla kontroller i formuläret. Om du föredrar att visa valideringsmeddelanden bredvid varje kontroll använder du flera ValidationMessage-komponenter . Kom ihåg att koppla varje ValidationMessage-kontroll till en specifik egenskap för modellen med hjälp av attributet 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();
}
Kontrollera appens formulärverifiering
Blazor utför validering vid två olika tidpunkter:
- Fältverifiering körs när en användare flikar ut ur ett fält. Fältverifiering säkerställer att en användare är medveten om valideringsproblemet så snart som möjligt.
- Modellverifieringen körs när användaren skickar formuläret. Modellvalidering säkerställer att ogiltiga data inte lagras.
Om ett formulär misslyckas med valideringen visas meddelanden i komponenterna ValidationSummary och ValidationMessage . Om du vill anpassa dessa meddelanden kan du lägga till ett ErrorMessage attribut till dataanteckningen för varje fält i modellen:
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; }
}
De inbyggda valideringsattributen är mångsidiga och du kan använda reguljära uttryck för att kontrollera mot många typer av textmönster. Men om du har specifika eller ovanliga krav för validering kanske du inte kan uppfylla dem exakt med inbyggda attribut. Under dessa omständigheter kan du skapa ett anpassat valideringsattribut. Börja med att skapa en klass som ärver från klassen ValidationAttribute och åsidosätter metoden 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;
}
}
Nu kan du använda ditt anpassade valideringsattribut när du använder de inbyggda attributen i modellklassen:
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; }
}
Hantera formulärvalidering på serversidan vid formuläröverföring
När du använder en EditForm komponent är tre händelser tillgängliga för att svara på formuläröverföring:
-
OnSubmit: Den här händelsen utlöses när användaren skickar ett formulär, oavsett resultatet av valideringen. -
OnValidSubmit: Den här händelsen utlöses när användaren skickar ett formulär och deras indata godkänns. -
OnInvalidSubmit: Den här händelsen utlöses när användaren skickar ett formulär och deras indata misslyckas med valideringen.
Om du använder OnSubmitutlöses inte de andra två händelserna. I stället kan du använda parametern EditContext för att kontrollera om indata ska bearbetas eller inte. Använd den här händelsen när du vill skriva din egen logik för att hantera formuläröverföring:
@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
}
}
}
Om du använder OnValidSubmit och OnInvalidSubmit i stället behöver du inte kontrollera verifieringstillståndet i varje händelsehanterare:
@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
}
}