Implizites Überprüfen von Benutzereingaben ohne Schreiben von Validierungscode
In einem Formular sollten Sie dem Websitebenutzer Anweisungen zum ordnungsgemäßen Eintragen der einzelnen Werte bereitstellen, aber Sie sollten auch die eingegebenen Werte überprüfen. Blazor stellt einfache Tools zur Verfügung, die diese Überprüfung mit einem Minimum an benutzerdefiniertem Code ausführen können.
In dieser Lerneinheit erfahren Sie, wie Sie Modelle so mit Anmerkungen kommentieren, dass Blazor weiß, welche Daten zu erwarten sind, und wie ein Formular für die korrekte Überprüfung von Benutzerdaten und die richtige Reaktion darauf konfiguriert wird.
Überprüfen von Benutzereingaben in Blazor-Formularen
Wenn Sie Informationen von einem Websitebenutzer sammeln, ist es wichtig zu überprüfen, ob sie sinnvoll sind und das richtige Format haben:
- Aus geschäftlichen Gründen: Kundeninformationen wie z. B. eine Telefonnummer oder Bestelldetails müssen korrekt sein, um Benutzern einen guten Service bieten zu können. Wenn Ihre Webseite beispielsweise eine falsch formatierte Telefonnummer erkennen kann, sobald der Benutzer sie eingibt, können Sie kostspielige Verzögerungen später verhindern.
- Aus technischen Gründen: Wenn Ihr Code Formulareingaben für Berechnungen oder andere Verarbeitungen verwendet, können falsche Eingaben zu Fehlern und Ausnahmen führen.
- Aus Sicherheitsgründen: Böswillige Benutzer*innen können Code einfügen, indem sie nicht überprüfte Eingabefelder ausnutzen.
Websitebenutzer sind mit Validierungsregeln vertraut, die überprüfen, ob die eingegebenen Details vorliegen und das richtige Format haben. Pflichtfelder werden häufig mit einem Sternchen oder einer Pflichtfeld-Bezeichnung (Required) gekennzeichnet. Wenn ein Wert ausgelassen oder ein fehlerhaft formatierter Wert eingegeben wird, wird eine Validierungsmeldung angezeigt, die den Benutzer anleitet, wie das Problem behoben werden kann. Die Validierungsmeldung wird möglicherweise angezeigt, wenn Benutzer*innen ein Feld verlassen oder wenn sie auf die Schaltfläche Absenden klicken.
Hier sehen Sie ein Beispielformular, in dem der Benutzer ungültige Daten übermittelt hat. In diesem Fall befinden sich Validierungsmeldungen am unteren Rand des Formulars, und ungültige Felder sind rot hervorgehoben. Dieses Formular werden Sie in der nächsten Übung erstellen:
Es ist eine gute Idee, Validierungsmeldungen so hilfreich wie möglich zu gestalten. Setzen Sie keine Kenntnisse bei den Benutzer*innen voraus: Beispielsweise kennt nicht jeder das Format einer gültigen E-Mail-Adresse.
Wenn Sie die EditForm-Komponente in Blazor verwenden, stehen Ihnen vielfältige Validierungsoptionen zur Verfügung, ohne komplexen Code schreiben zu müssen:
- In Ihrem Modell können Sie Datenanmerkungen für jede Eigenschaft verwenden, um Blazor zu informieren, wann Werte erforderlich (Pflicht) sind und in welchem Format sie vorliegen müssen.
- Fügen Sie in Ihrer
EditForm-Komponente die Komponente DataAnnotationsValidator hinzu, mit der die Modellanmerkungen mit den durch die Benutzer*innen eingegebenen Werten abgeglichen wird. - Verwenden Sie die ValidationSummary-Komponente, wenn Sie eine Zusammenfassung aller Validierungsmeldungen in einem übermittelten Formular anzeigen möchten.
- Verwenden Sie die ValidationMessage-Komponente, wenn Sie die Validierungsmeldung zu einer bestimmten Modelleigenschaft anzeigen möchten.
Vorbereiten von Modellen für die Validierung
Beginnen Sie damit, der DataAnnotationsValidator-Komponente mitzuteilen, wie gültige Daten aussehen. Sie deklarieren Validierungseinschränkungen mithilfe von Anmerkungsattributen in Ihrem Datenmodell. Betrachten Sie das folgende Beispiel:
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; }
}
Wir verwenden dieses Modell in einem Formular, das es Mitarbeitern von Blazing Pizza ermöglicht, der Karte neue Pizzas hinzuzufügen. Es enthält das [Required]-Attribut, um sicherzustellen, dass die Werte für Name und Price immer eingegeben sind. Es verwendet außerdem das [Range]-Attribut, um zu überprüfen, ob der eingegebene Preis innerhalb eines sinnvollen Bereichs für eine Pizza liegt. Schließlich verwendet es das [EmailAddress]-Attribut, um zu überprüfen, ob der eingegebene ChefEmail-Wert eine gültige E-Mail-Adresse ist.
Weitere Anmerkungen, die Sie in einem Modell verwenden können, sind unter anderem:
[ValidationNever]: Verwenden Sie diese Anmerkung, wenn Sie sicherstellen möchten, dass das Feld nie in die Validierung eingeschlossen wird.[CreditCard]: Verwenden Sie diese Anmerkung, wenn Sie eine gültige Kreditkartennummer des Benutzers aufzeichnen möchten.[Compare]: Verwenden Sie diese Anmerkung, wenn Sie sicherstellen möchten, dass zwei Eigenschaften im Modell übereinstimmen.[Phone]: Verwenden Sie diese Anmerkung, wenn Sie eine gültige Telefonnummer des Benutzers aufzeichnen möchten.[RegularExpression]: Verwenden Sie diese Anmerkung, um das Format eines Werts zu überprüfen, indem er mit einem regulären Ausdruck verglichen wird.[StringLength]: Verwenden Sie diese Anmerkung, um zu überprüfen, ob die Länge eines Zeichenfolgenwerts eine maximale Länge nicht überschreitet.[Url]: Verwenden Sie diese Anmerkung, wenn Sie eine gültige Url des Benutzers aufzeichnen möchten.
Hinweis
Reguläre Ausdrücke werden häufig verwendet, um Zeichenfolgen mit Mustern zu vergleichen sowie zum Ändern von Zeichenfolgen. Sie können sie verwenden, um benutzerdefinierte Formate zu definieren, die Formularwerte einhalten müssen. Weitere Informationen zu regulären Ausdrücken in .NET finden Sie unter Reguläre Ausdrücke in .NET.
Hinzufügen von Validierungskomponenten zum Formular
Um Ihr Formular für die Datenanmerkungsvalidierung zu konfigurieren, stellen Sie zunächst sicher, dass Sie das Eingabesteuerelement an die Eigenschaften des Modells gebunden haben. Fügen Sie dann die DataAnnotationsValidator-Komponente an einer stelle innerhalb der EditForm-Komponente hinzu. Um die von der Validierung generierten Meldungen anzuzeigen, verwenden Sie die ValidationSummary-Komponente, die alle Validierungsmeldungen für alle Steuerelemente im Formular anzeigt. Wenn Sie Validierungsmeldungen lieber neben jedem Steuerelement anzeigen möchten, verwenden Sie mehrere ValidationMessage-Komponenten. Denken Sie daran, jedes ValidationMessage-Steuerelement mithilfe des For-Attributs mit einer bestimmten Eigenschaft des Modells zu verknüpfen:
@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();
}
Steuern der Formularvalidierung Ihrer App
Blazor führt eine Validierung an zwei verschiedenen Zeitpunkten durch:
- DieFeldvalidierung wird ausgeführt, wenn ein Benutzer mit der Tab-Taste ein Feld verlässt. Die Feldvalidierung stellt sicher, dass ein Benutzer das Validierungsproblem zum frühestmöglichen Zeitpunkt bemerkt.
- Die Modellvalidierung wird ausgeführt, wenn ein Benutzer das Formular übermittelt. Die Modellvalidierung stellt sicher, dass keine ungültigen Daten gespeichert werden.
Wenn die Überprüfung eines Formulars fehlschlägt, werden Meldungen in den Komponenten ValidationSummary und ValidationMessage angezeigt. Um diese Meldungen anzupassen, können Sie der Datenanmerkung für jedes Feld im Modell ein ErrorMessage-Attribut hinzufügen:
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; }
}
Die integrierten Validierungsattribute sind sehr vielseitig, und Sie können reguläre Ausdrücke zum Überprüfen mit viele Arten von Textmustern nutzen. Wenn Sie jedoch spezifische oder ungewöhnliche Anforderungen an die Validierung haben, können Sie diese möglicherweise mit integrierten Attributen nicht komplett erfüllen. Unter diesen Umständen können Sie ein benutzerdefiniertes Validierungsattribut erstellen. Erstellen Sie zunächst eine Klasse, die von der ValidationAttribute-Klasse erbt, und überschreiben Sie die Methode 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;
}
}
Jetzt können Sie Ihr benutzerdefiniertes Validierungsattribut so verwenden, wie Sie die integrierten Attribute in der Modellklasse verwenden:
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; }
}
Serverseitige Verarbeitung von Formularüberprüfungen bei der Formularübermittlung
Wenn Sie eine EditForm-Komponente verwenden, stehen drei Ereignisse für die Antwort auf die Formularübermittlung zur Verfügung:
OnSubmit: Dieses Ereignis wird immer dann ausgelöst, wenn der Benutzer ein Formular übermittelt. Dies gilt unabhängig von den Ergebnissen der Validierung.OnValidSubmit: Dieses Ereignis wird ausgelöst, wenn der Benutzer ein Formular übermittelt und die Eingabe erfolgreich validiert wurde.OnInvalidSubmit: Dieses Ereignis wird ausgelöst, wenn der Benutzer ein Formular übermittelt und die Eingabe nicht erfolgreich validiert wurde.
Wenn Sie OnSubmit verwenden, werden die anderen beiden Ereignisse nicht ausgelöst. Stattdessen können Sie den EditContext-Parameter verwenden, um zu überprüfen, ob die Eingabedaten verarbeitet werden sollen. Verwenden Sie dieses Ereignis, wenn Sie Ihre eigene Logik schreiben möchten, um die Formularübermittlung zu verarbeiten:
@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
}
}
}
Wenn Sie stattdessen OnValidSubmit und OnInvalidSubmit verwenden, müssen Sie den Validierungszustand nicht in jedem Ereignishandler überprüfen:
@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
}
}