Gebruikersinvoer impliciet valideren zonder validatiecode te schrijven
- 5 minuten
In een formulier moet u instructies opgeven voor de websitegebruiker over het correct voltooien van elke waarde, maar u moet ook de waarden controleren die ze invoeren. Blazor biedt eenvoudige hulpprogramma's waarmee deze validatie kan worden uitgevoerd met het minimum aan aangepaste code.
In deze les leert u hoe u aantekeningen maakt bij modellen, zodat Blazor weet welke gegevens u kunt verwachten. U leert ook hoe u een formulier configureert, zodat het correct valideert en reageert op gebruikersgegevens.
Gebruikersinvoer valideren in Blazor-formulieren
Wanneer u gegevens van een websitegebruiker verzamelt, is het belangrijk om te controleren of het zinvol is en in de juiste vorm is:
- Om zakelijke redenen: klantgegevens, zoals een telefoonnummer of ordergegevens, moeten juist zijn om gebruikers goede service te geven. Als uw webpagina bijvoorbeeld een onjuist gevormd telefoonnummer kan vinden zodra de gebruiker het invoert, kunt u kostbare vertragingen later voorkomen.
- Om technische redenen: Als uw code formulierinvoer gebruikt voor berekeningen of andere verwerkingen, kan onjuiste invoer fouten en uitzonderingen veroorzaken.
- Om veiligheidsredenen: Kwaadwillende gebruikers kunnen proberen code te injecteren door invoervelden te misbruiken die niet zijn gecontroleerd.
Websitegebruikers zijn bekend met validatieregels die controleren op de aanwezigheid en de juiste indeling van de gegevens die ze invoeren. Vereiste velden worden vaak gemarkeerd met een sterretje of een verplicht label. Als ze een waarde weglaten of een slecht opgemaakte waarde invoeren, zien ze een validatiebericht waarin wordt uitgelegd hoe het probleem kan worden opgelost. Het validatiebericht kan verschijnen wanneer de gebruiker uit een veld gaat of wanneer ze de knop Verzenden selecteren.
Hier volgt een voorbeeldformulier waarin de gebruiker ongeldige gegevens verzendt. In dit geval zijn er validatieberichten onder aan het formulier en worden ongeldige velden rood gemarkeerd. In de volgende oefening bouwt u dit formulier:
Het is een goed idee om validatieberichten zo nuttig mogelijk te maken. Neem geen kennis van de gebruiker aan; Zo weet niet iedereen de indeling van een geldig e-mailadres.
Wanneer u het EditForm onderdeel in Blazor gebruikt, hebt u veelzijdige validatieopties beschikbaar zonder complexe code te schrijven:
- In uw model kunt u gegevensaantekeningen voor elke eigenschap gebruiken om Blazor te vertellen wanneer waarden vereist zijn en in welke indeling ze moeten staan.
- Voeg in uw
EditFormonderdeel het onderdeel DataAnnotationsValidator toe, waarmee de modelaantekeningen worden gecontroleerd op basis van de ingevoerde waarden van de gebruiker. - Gebruik het onderdeel ValidationSummary als u een samenvatting wilt weergeven van alle validatieberichten in een verzonden formulier.
- Gebruik het validatieberichtonderdeel als u het validatiebericht voor een specifieke modeleigenschap wilt weergeven.
Modellen voorbereiden voor validatie
Begin met het vertellen van het dataannotationsValidator-onderdeel hoe geldige gegevens eruit zien. U declareert validatiebeperkingen met behulp van aantekeningenkenmerken in uw gegevensmodel. Kijk eens naar dit voorbeeld:
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; }
}
We gebruiken dit model in een vorm waarmee Blazing Pizza-medewerkers nieuwe pizza's aan het menu kunnen toevoegen. Het bevat het [Required] kenmerk om ervoor te zorgen dat de Name en Price waarden altijd zijn voltooid. Het gebruikt ook het [Range] kenmerk om te controleren of de opgegeven prijs binnen een verstandig bereik voor een pizza valt. Ten slotte wordt het [EmailAddress] kenmerk gebruikt om te controleren of de ChefEmail ingevoerde waarde een geldig e-mailadres is.
Andere aantekeningen die u in een model kunt gebruiken, zijn onder andere:
-
[ValidationNever]: Gebruik deze aantekening als u ervoor wilt zorgen dat het veld nooit is opgenomen in de validatie. -
[CreditCard]: Gebruik deze aantekening als u een geldig creditcardnummer van de gebruiker wilt opnemen. -
[Compare]: Gebruik deze aantekening als u ervoor wilt zorgen dat twee eigenschappen in het model overeenkomen. -
[Phone]: Gebruik deze aantekening als u een geldig telefoonnummer van de gebruiker wilt opnemen. -
[RegularExpression]: Gebruik deze aantekening om de notatie van een waarde te controleren door deze te vergelijken met een reguliere expressie. -
[StringLength]: Gebruik deze aantekening om te controleren of de lengte van een tekenreekswaarde niet groter is dan een maximale lengte. -
[Url]: Gebruik deze aantekening als u een geldige URL van de gebruiker wilt opnemen.
Note
Reguliere expressies worden veel gebruikt om tekenreeksen te vergelijken met patronen en om tekenreeksen te wijzigen. U kunt deze gebruiken om aangepaste notaties te definiëren waaraan formulierwaarden moeten voldoen. Zie .NET-reguliere expressies voor meer informatie over reguliere expressies in .NET.
Validatieonderdelen toevoegen aan het formulier
Als u uw formulier wilt configureren voor validatie van gegevensaantekening, moet u eerst controleren of het invoerbesturingselement is gebonden aan de modeleigenschappen. Voeg vervolgens het onderdeel DataAnnotationsValidator ergens in het EditForm onderdeel toe. Als u de berichten wilt weergeven die door validatie worden gegenereerd, gebruikt u het onderdeel ValidationSummary , waarin alle validatieberichten voor alle besturingselementen in het formulier worden weergegeven. Als u liever validatieberichten naast elk besturingselement weergeeft, gebruikt u meerdere ValidationMessage-onderdelen . Vergeet niet om elk Validatiebericht-besturingselement aan een specifieke eigenschap van het model te koppelen met behulp van het For kenmerk:
@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();
}
Formuliervalidatie van uw app beheren
Blazor voert validatie op twee verschillende tijdstippen uit:
- Veldvalidatie wordt uitgevoerd wanneer een gebruiker het veld verlaat. Veldvalidatie zorgt ervoor dat een gebruiker op de hoogte is van het validatieprobleem op het vroegst mogelijke moment.
- Modelvalidatie wordt uitgevoerd wanneer de gebruiker het formulier verzendt. Modelvalidatie zorgt ervoor dat ongeldige gegevens niet worden opgeslagen.
Als de validatie van een formulier mislukt, worden berichten weergegeven in de onderdelen ValidationSummary en ValidationMessage . Als u deze berichten wilt aanpassen, kunt u een ErrorMessage kenmerk toevoegen aan de gegevensaantekening voor elk veld in het model:
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 ingebouwde validatiekenmerken zijn veelzijdig en u kunt reguliere expressies gebruiken om te controleren op veel soorten tekstpatronen. Als u echter specifieke of ongebruikelijke vereisten voor validatie hebt, kunt u deze mogelijk niet nauwkeurig voldoen met ingebouwde kenmerken. In deze omstandigheden kunt u een aangepast validatiekenmerk maken. Begin met het maken van een klasse die wordt overgenomen van de klasse ValidationAttribute en de Methode IsValid overschrijft:
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;
}
}
U kunt nu uw aangepaste validatiekenmerk gebruiken als u de ingebouwde kenmerken in de modelklasse gebruikt:
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; }
}
Formuliervalidaties verwerken aan de serverzijde bij het verzenden van formulieren
Wanneer u een EditForm onderdeel gebruikt, zijn er drie gebeurtenissen beschikbaar om te reageren op het indienen van formulieren:
-
OnSubmit: Deze gebeurtenis wordt geactiveerd wanneer de gebruiker een formulier indient, ongeacht de resultaten van de validatie. -
OnValidSubmit: Deze gebeurtenis wordt geactiveerd wanneer de gebruiker een formulier indient en de invoer wordt gevalideerd. -
OnInvalidSubmit: Deze gebeurtenis wordt geactiveerd wanneer de gebruiker een formulier verzendt en de invoer mislukt.
Als u OnSubmit gebruikt, worden de andere twee gebeurtenissen niet geactiveerd. In plaats daarvan kunt u de EditContext parameter gebruiken om te controleren of de invoergegevens moeten worden verwerkt of niet. Gebruik deze gebeurtenis als u uw eigen logica wilt schrijven om formulierinzending af te handelen:
@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
}
}
}
Als u deze gebruikt OnValidSubmit en OnInvalidSubmit in plaats daarvan, hoeft u de validatiestatus niet binnen elke gebeurtenis-handler te controleren:
@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
}
}