Valide a entrada do usuário implicitamente sem escrever código de validação
- 5 minutos
Em um formulário, você deve fornecer instruções ao usuário do site sobre como preencher cada valor corretamente, mas você também deve verificar os valores que eles inserem. Blazor fornece ferramentas simples que podem realizar essa validação com o mínimo de código personalizado.
Nesta unidade, você aprende a anotar modelos para que Blazor saiba quais dados esperar. Você também aprenderá como configurar um formulário para que ele valide e responda aos dados do usuário corretamente.
Validar a entrada do usuário em formulários Blazor
Quando você coleta informações de um usuário do site, é importante verificar se elas fazem sentido e estão na forma correta:
- Por motivos comerciais: As informações do cliente, como um número de telefone ou detalhes do pedido, devem estar corretas para oferecer um bom serviço aos usuários. Por exemplo, se a sua página Web conseguir detetar um número de telefone mal formado assim que o utilizador o introduzir, pode evitar atrasos dispendiosos mais tarde.
- Por razões técnicas: Se o seu código usa a entrada de formulário para cálculos ou outro processamento, a entrada incorreta pode causar erros e exceções.
- Por motivos de segurança: usuários mal-intencionados podem tentar injetar código explorando campos de entrada que não estão marcados.
Os utilizadores do sítio Web estão familiarizados com as regras de validação que verificam a presença e o formato correto dos dados introduzidos. Os campos obrigatórios são frequentemente marcados com um asterisco ou uma etiqueta Obrigatório . Se omitirem um valor ou inserirem um valor mal formatado, verão uma mensagem de validação instruindo-os sobre como corrigir o problema. A mensagem de validação pode aparecer quando o usuário sai de um campo ou quando seleciona o botão Enviar .
Aqui está um formulário de exemplo onde o usuário envia dados inválidos. Nesse caso, há mensagens de validação na parte inferior do formulário e os campos inválidos são destacados em vermelho. Você criará este formulário no próximo exercício:
É uma boa ideia tornar as mensagens de validação o mais úteis possível. Não assuma qualquer conhecimento do utilizador; Por exemplo, nem todos sabem o formato de um endereço de e-mail válido.
Quando você usa o EditForm componente no Blazor, você tem opções de validação versáteis disponíveis sem escrever código complexo:
- Em seu modelo, você pode usar anotações de dados em cada propriedade para informar ao Blazor quando os valores são necessários e em que formato eles devem estar.
- Dentro do seu
EditFormcomponente, adicione o componente DataAnnotationsValidator , que verifica as anotações do modelo em relação aos valores inseridos do usuário. - Use o componente ValidationSummary quando quiser exibir um resumo de todas as mensagens de validação em um formulário enviado.
- Use o componente ValidationMessage quando desejar exibir a mensagem de validação para uma propriedade de modelo específica.
Preparar modelos para validação
Comece informando ao componente DataAnnotationsValidator como são os dados válidos. Você declara restrições de validação usando atributos de anotação em seu modelo de dados. Considere este exemplo:
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; }
}
Usamos este modelo de uma forma que permite ao pessoal da Blazing Pizza adicionar novas pizzas ao menu. Ele inclui o [Required] atributo para garantir que os Name valores e Price sejam sempre concluídos. Ele também usa o [Range] atributo para verificar se o preço inserido está dentro de um intervalo razoável para uma pizza. Finalmente, ele usa o [EmailAddress] atributo para verificar se o valor inserido ChefEmail é um endereço de e-mail válido.
Outras anotações que você pode usar em um modelo incluem:
-
[ValidationNever]: Use esta anotação quando quiser garantir que o campo nunca seja incluído na validação. -
[CreditCard]: Use esta anotação quando quiser registrar um número de cartão de crédito válido do usuário. -
[Compare]: Use esta anotação quando quiser garantir que duas propriedades no modelo coincidam. -
[Phone]: Use esta anotação quando quiser gravar um número de telefone válido do usuário. -
[RegularExpression]: Use esta anotação para verificar o formato de um valor comparando-o com uma expressão regular. -
[StringLength]: Use esta anotação para verificar se o comprimento de um valor de cadeia de caracteres não excede um comprimento máximo. -
[Url]: Use esta anotação quando quiser gravar uma URL válida do usuário.
Note
As expressões regulares são amplamente utilizadas para comparar cadeias de caracteres com padrões e também para modificar cadeias de caracteres. Você pode usá-los para definir formatos personalizados aos quais os valores de formulário devem estar em conformidade. Para saber mais sobre expressões regulares no .NET, consulte Expressões regulares do .NET.
Adicionar componentes de validação ao formulário
Para configurar seu formulário para usar a validação de anotação de dados, primeiro verifique se o controle de entrada está vinculado às propriedades do modelo. Em seguida, adicione o componente DataAnnotationsValidator em algum lugar dentro do EditForm componente. Para exibir as mensagens geradas pela validação, use o componente ValidationSummary , que mostra todas as mensagens de validação para todos os controles no formulário. Se você preferir mostrar mensagens de validação ao lado de cada controle, use vários componentes ValidationMessage . Lembre-se de vincular cada controle ValidationMessage a uma propriedade específica do modelo, usando o For atributo:
@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();
}
Controlar a validação de formulário do seu aplicativo
Blazor realiza a validação em dois momentos diferentes:
- A validação de campo é executada quando um usuário sai de um campo. A validação de campo garante que um usuário esteja ciente do problema de validação o mais cedo possível.
- A validação do modelo é executada quando o usuário envia o formulário. A validação do modelo garante que dados inválidos não sejam armazenados.
Se um formulário falhar na validação, as mensagens serão exibidas nos componentes ValidationSummary e ValidationMessage . Para personalizar essas mensagens, você pode adicionar um ErrorMessage atributo à anotação de dados para cada campo no modelo:
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; }
}
Os atributos de validação internos são versáteis e você pode usar expressões regulares para verificar muitos tipos de padrões de texto. No entanto, se você tiver requisitos específicos ou incomuns para validação, talvez não consiga satisfazê-los com precisão com atributos internos. Nessas circunstâncias, você pode criar um atributo de validação personalizado. Comece criando uma classe que herda da classe ValidationAttribute e substitui o método 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;
}
}
Agora, você pode usar seu atributo de validação personalizado como você usa os atributos internos na classe de modelo:
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; }
}
Manipular validações de formulário no lado do servidor no envio de formulários
Quando você usa um EditForm componente, três eventos estão disponíveis para responder ao envio de formulário:
-
OnSubmit: Este evento é acionado sempre que o usuário envia um formulário, independentemente dos resultados da validação. -
OnValidSubmit: Este evento é acionado quando o usuário envia um formulário e sua entrada passa na validação. -
OnInvalidSubmit: Este evento é acionado quando o usuário envia um formulário e sua entrada falha na validação.
Se utilizar OnSubmit, os outros dois eventos não serão acionados. Em vez disso, você pode usar o EditContext parâmetro para verificar se os dados de entrada devem ser processados ou não. Use este evento quando quiser escrever sua própria lógica para lidar com o envio de formulários:
@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 você usar OnValidSubmit e OnInvalidSubmit , em vez disso, não for necessário verificar o estado de validação em cada manipulador de eventos:
@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
}
}