Convalidare l'input dell'utente in modo implicito senza scrivere codice di convalida
In un modulo è necessario fornire istruzioni all'utente del sito Web su come inserire correttamente ogni valore, ma è necessario anche controllare i valori immessi. Blazor offre strumenti semplici che possono eseguire questa convalida con la quantità minima di codice personalizzato.
In questa unità si apprenderà come annotare i modelli per indicare a Blazor i dati previsti e come configurare un modulo per convalidare e rispondere correttamente ai dati dell'utente.
Convalidare l'input dell'utente nei moduli Blazor
Quando si raccolgono informazioni da un utente del sito Web, è importante verificare che abbiano senso e siano nel formato corretto:
- Per motivi aziendali: le informazioni sui clienti, ad esempio un numero di telefono o i dettagli dell'ordine, devono essere corrette per fornire un buon servizio agli utenti. Ad esempio, se la pagina Web può individuare un numero di telefono non corretto non appena l'utente lo immette, sarà possibile evitare ritardi costosi in un secondo momento.
- Per motivi tecnici: se il codice usa l'input del modulo per i calcoli o altre elaborazioni, l'input non corretto può causare errori ed eccezioni.
- Per motivi di sicurezza: gli utenti malintenzionati potrebbero provare a inserire codice sfruttando i campi di input non controllati.
Gli utenti del sito Web hanno familiarità con le regole di convalida che controllano la presenza e il formato dei dettagli immessi. I campi obbligatori sono spesso contrassegnati con un asterisco o un'etichetta Obbligatorio. Se un valore non viene immesso o viene immesso in un formato non corretto, viene visualizzato un messaggio di convalida che indica come risolvere il problema. Il messaggio di convalida potrebbe essere visualizzato quando l'utente esce da un campo o quando fa clic sul pulsante Invia .
Di seguito è riportato un modulo di esempio in cui l'utente ha inviato dati non validi. In questo caso sono presenti messaggi di convalida nella parte inferiore del modulo e i campi non validi sono evidenziati in rosso. Questo modulo verrà creato nel prossimo esercizio:
È consigliabile rendere i messaggi di convalida più utili possibile. Non presupporre alcuna conoscenza dell'utente; ad esempio, non tutti conoscono il formato di un indirizzo di posta elettronica valido.
Quando si usa il EditForm componente in Blazor, sono disponibili opzioni di convalida versatili senza scrivere codice complesso:
- Nel modello è possibile usare annotazioni di dati in ogni proprietà per indicare a Blazor i valori obbligatori e il formato corretto.
- All'interno del
EditFormcomponente aggiungere il componente DataAnnotationsValidator , che controlla le annotazioni del modello rispetto ai valori immessi dall'utente. - Usare il componente ValidationSummary quando si vuole visualizzare un riepilogo di tutti i messaggi di convalida in un modulo inviato.
- Usare il componente ValidationMessage quando si vuole visualizzare il messaggio di convalida per una proprietà del modello specifica.
Preparare i modelli per la convalida
Iniziare indicando al componente DataAnnotationsValidator quali sono i dati validi. Dichiarare le restrizioni della convalida usando attributi di annotazione nel modello di dati. Si consideri questo esempio:
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; }
}
Questo modello verrà usato in un modulo che consente al personale di Blazing Pizza di aggiungere nuove pizze al menu. Include l'attributo [Required] per garantire che i valori Name e Price vengano sempre specificati. Usa anche l'attributo [Range] per verificare che il prezzo immesso si compreso in un intervallo ragionevole per una pizza. Infine, usa l'attributo [EmailAddress] per verificare che il valore ChefEmail immesso sia un indirizzo di posta elettronica valido.
Le altre annotazioni che è possibile usare in un modello includono:
[ValidationNever]: usare questa annotazione quando si vuole assicurarsi che il campo non sia mai incluso nella convalida.[CreditCard]: usare questa annotazione quando si desidera registrare un numero di carta di credito valido dall'utente.[Compare]: usare questa annotazione quando si desidera assicurarsi che due proprietà nel modello corrispondano.[Phone]: usare questa annotazione quando si desidera registrare un numero di telefono valido dall'utente.[RegularExpression]: usare questa annotazione per controllare il formato di un valore confrontandolo con un'espressione regolare.[StringLength]: usare questa annotazione per verificare che la lunghezza di un valore stringa non superi una lunghezza massima.[Url]: usare questa annotazione quando si desidera registrare un URL valido dall'utente.
Nota
Le espressioni regolari vengono frequentemente usate per confrontare le stringhe rispetto ai modelli e anche per modificare le stringhe. È possibile usarle per definire formati personalizzati che devono essere rispettati dai valori del modulo. Per altre informazioni sulle espressioni regolari in .NET, vedere Espressioni regolari .NET.
Aggiungere componenti di convalida al modulo
Per configurare il modulo in modo da usare la convalida dell'annotazione dei dati, assicurarsi di aver associato il controllo di input alle proprietà del modello. Aggiungere quindi il componente DataAnnotationsValidator in un punto qualsiasi all'interno del EditForm componente. Per visualizzare i messaggi generati dalla convalida, usare il componente ValidationSummary che visualizza tutti i messaggi di convalida per tutti i controlli nel modulo. Se si preferisce visualizzare i messaggi di convalida accanto a ogni controllo, usare più componenti ValidationMessage. Ricordarsi di associare ogni controllo ValidationMessage a una proprietà specifica del modello usando l'attributo 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();
}
Controllare la convalida del modulo dell'app
Blazor esegue la convalida in due momenti diversi:
- La convalida dei campi viene eseguita quando un utente esce da un campo. La convalida dei campi garantisce che un utente sia a conoscenza del problema di convalida il prima possibile.
- La convalida del modello viene eseguita quando l'utente invia il modulo. La convalida del modello garantisce che i dati non validi non vengano archiviati.
Se non viene eseguita la convalida di un modulo, i messaggi vengono visualizzati nei componenti ValidationSummary e ValidationMessage. Per personalizzare questi messaggi, è possibile aggiungere un attributo ErrorMessage all'annotazione dei dati per ogni campo nel modello:
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; }
}
Gli attributi di convalida predefiniti sono versatili ed è possibile usare espressioni regolari per verificare in base a molti tipi di modelli di testo. Tuttavia, se sono presenti requisiti specifici o insoliti per la convalida, potrebbe non essere possibile soddisfarli esattamente con gli attributi predefiniti. In questi casi è possibile creare un attributo di convalida personalizzato. Iniziare creando una classe che eredita dalla classe ValidationAttribute ed esegue l'override del metodo 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;
}
}
È ora possibile usare l'attributo di convalida personalizzato quando si usano gli attributi predefiniti nella classe del modello:
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; }
}
Gestire le convalide dei moduli sul lato server nell'invio di moduli
Quando si usa un EditForm componente, sono disponibili tre eventi per rispondere all'invio di moduli:
OnSubmit: questo evento viene generato ogni volta che l'utente invia un modulo, indipendentemente dai risultati della convalida.OnValidSubmit: questo evento viene generato quando l'utente invia un modulo e l'input supera la convalida.OnInvalidSubmit: questo evento viene generato quando l'utente invia un modulo e l'input non supera la convalida.
Se si usa OnSubmit, gli altri due eventi non verranno generati. È invece possibile usare il EditContext parametro per verificare se elaborare o meno i dati di input. Usare questo evento quando si vuole scrivere la propria logica per gestire l'invio dei moduli:
@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
}
}
}
Se invece si usa OnValidSubmit e OnInvalidSubmit non è necessario controllare lo stato di convalida all'interno di ogni gestore eventi:
@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
}
}