Validar a entrada do usuário implicitamente sem gravar código de validação
Em um formulário, você deve fornecer instruções para o usuário do site sobre como concluir cada valor corretamente, mas também deve verificar os valores que eles inserem. O Blazor fornece ferramentas simples que podem executar essa validação com o mínimo de código personalizado.
Nesta unidade, você aprenderá a anotar modelos para que o Blazor saiba quais dados devem ser esperados e como configurar um formulário para validar e responder 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 faz sentido e está no formato certo:
- Por motivos comerciais: as informações do cliente, como um número de telefone ou detalhes do pedido, devem estar corretas para fornecer um bom serviço aos usuários. Por exemplo, se sua página da Web puder identificar um número de telefone malformado assim que o usuário o inserir, você poderá evitar atrasos significativos mais tarde.
- Por motivos técnicos: se o seu código usar entrada de formulário para cálculos ou outro processamento, a entrada incorreta poderá 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 são verificados.
Os usuários do site estão familiarizados com as regras de validação que verificam a presença e o formato correto dos detalhes que eles inserem. Os campos obrigatórios geralmente são marcados com um asterisco ou um rótulo Obrigatório. Se eles omitirem um valor ou digitarem um valor mal formatado, eles verão uma mensagem de validação que os instrui sobre como colocar o problema à direita. A mensagem de validação pode ser exibida quando o usuário sai de um campo ou quando ele clica no botão Enviar.
Aqui está um formulário de exemplo em que o usuário enviou dados inválidos. Nesse caso, há mensagens de validação na parte inferior do formulário e os campos inválidos são realçados em vermelho. Você criará esse formulário no próximo exercício:
É uma boa ideia tornar as mensagens de validação o mais úteis possível. Não presuma nenhum conhecimento do usuário; por exemplo, nem todos sabem o formato de um endereço de email válido.
Ao usar o componente EditForm no Blazor, você tem opções de validação versáteis disponíveis sem escrever código complexo:
- Em seu modelo, você pode usar as anotações de dados em relação a cada propriedade para informar ao Blazor quando os valores são necessários e em qual formato eles devem estar.
- No componente
EditForm, adicione o componente DataAnnotationsValidator, que verifica as anotações do modelo em relação aos valores inseridos pelo usuário. - Use o componente ValidationSummary quando desejar 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 ao usar 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; }
}
Usaremos esse modelo em um formulário que permite que a equipe da Blazing Pizza adicione novas pizzas ao menu. Ele inclui o atributo [Required] para garantir que os valores Name e Price estejam sempre completos. Ele também usa o atributo [Range] para verificar se o preço inserido está dentro de um intervalo sensato para uma pizza. Por fim, ele usa o atributo [EmailAddress] para verificar se o valor ChefEmail digitado é um endereço de email válido.
Outras anotações que você pode usar em um modelo incluem:
[ValidationNever]: Use essa anotação quando desejar garantir que o campo nunca seja incluído na validação.[CreditCard]: Use essa anotação quando desejar registrar um número de cartão de crédito válido do usuário.[Compare]: Use essa anotação quando desejar garantir que duas propriedades no modelo correspondam.[Phone]: Use essa anotação quando desejar registrar um número de telefone válido do usuário.[RegularExpression]: Use essa anotação para verificar o formato de um valor comparando-o a 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 essa anotação quando desejar registrar uma URL válida do usuário.
Observação
As expressões regulares são amplamente usadas para comparar cadeias de caracteres com padrões e também para modificar cadeias de caracteres. Você pode usá-las para definir os formatos personalizados aos quais os valores de formulário devem estar em conformidade. Para saber mais sobre expressões regulares no .NET, confira Expressões regulares do .NET.
Adicionar componentes de validação ao formulário
Para configurar seu formulário para usar validação de anotação de dados, primeiro certifique-se de vincular o controle de entrada às propriedades do modelo. Adicione o componente DataAnnotationsValidator em algum lugar no componente EditForm. Para exibir as mensagens geradas pela validação, use o componente ValidationSummary, que exibe 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 de ValidationMessage. Lembre-se de vincular cada controle ValidationMessage a uma propriedade específica do modelo, usando o atributo 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();
}
Controlar a validação do formulário do aplicativo
O Blazor executa a validação em dois momentos diferentes:
- A validação de campo é executada quando um usuário faz uma tabulação 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 de modelo garante que os 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 atributo ErrorMessage à 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ão de texto. No entanto, se você tiver requisitos específicos ou incomuns para validação, talvez não seja possível atender precisamente a eles 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 o atributo de validação personalizado ao usar 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; }
}
Tratar validações de formulários no lado do servidor no envio de formulário
Quando você usa um componente EditForm, três eventos estão disponíveis para responder ao envio de formulários:
OnSubmit: esse evento é acionado sempre que o usuário envia um formulário, independentemente dos resultados da validação.OnValidSubmit: esse evento é acionado quando o usuário envia um formulário e sua validação de entrada é aprovada.OnInvalidSubmit: esse evento é acionado quando o usuário envia um formulário e sua entrada falha na validação.
Se você usar OnSubmit, os outros dois eventos não serão acionados. Em vez disso, você pode usar o parâmetro EditContext para verificar se os dados de entrada devem ser processados ou não. Use esse evento quando desejar escrever sua própria lógica para lidar com o envio de formulário:
@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, não precisará 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
}
}