Validação de entrada de dados em formulários
No tópico anterior, aprendemos sobre como criar e manipular formulários no React.
Hoje, vamos aprender sobre como validar a entrada de dados em formulários.
Por que validar a entrada de dados?
Validar a entrada de dados em formulários é importante para:
- Garantir a qualidade dos dados: A validação ajuda a garantir que os dados coletados sejam precisos e completos.
- Evitar erros: A validação ajuda a evitar erros no processamento dos dados.
- Melhorar a experiência do usuário: A validação ajuda a fornecer uma experiência melhor para o usuário, evitando que ele digite dados incorretos.
Como validar a entrada de dados?
Existem diversas técnicas para validar a entrada de dados em formulários, como:
- Validação de tipo de dado: Podemos verificar se o valor digitado é do tipo de dado esperado, como número, email, data etc.
- Validação de tamanho: Podemos verificar se o valor digitado está dentro de um tamanho mínimo e máximo.
- Validação de conteúdo: Podemos verificar se o valor digitado é um valor válido, como um endereço de email válido ou um código postal válido.
Exemplo de validação de entrada de dados
Vamos ver um exemplo de como validar a entrada de dados em um formulário:
const App = () => { const [nome, setNome] = React.useState(""); const [email, setEmail] = React.useState(""); const handleSubmit = (event) => { event.preventDefault(); const errors = []; if (!nome) { errors.push("O nome é obrigatório"); } if (!email) { errors.push("O email é obrigatório"); } else if (!/\S+@\S+\.\S+/.test(email)) { errors.push("O email é inválido"); } if (errors.length > 0) { alert(errors.join("\n")); } else { alert(`Olá, ${nome}! Seu email é ${email}.`); } }; return ( <div> <h1>Formulário</h1> <form onSubmit={handleSubmit}> <label htmlFor="nome">Nome:</label> <input type="text" id="nome" name="nome" value={nome} onChange={(event) => setNome(event.target.value)} /> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" value={email} onChange={(event) => setEmail(event.target.value)} /> <button type="submit">Enviar</button> </form> </div> ); };
Neste exemplo, o componente App
valida o nome e o email digitados pelo usuário.
A validação é feita usando a função handleSubmit
.
A função handleSubmit
verifica se o nome e o email estão vazios.
A função handleSubmit
também verifica se o email é um valor válido usando uma expressão regular.
Se houver erros de validação, a função handleSubmit
exibe um alerta com os erros.
Se não houver erros de validação, a função handleSubmit
exibe um alerta com o nome e o email digitados pelo usuário.
Observações importantes
Ao validar a entrada de dados, é importante:
- Usar mensagens de erro claras e objetivas: As mensagens de erro devem ser claras e objetivas para que o usuário entenda o que precisa ser corrigido.
- Evitar mensagens de erro genéricas: As mensagens de erro devem ser específicas para cada tipo de erro.
- Oferecer ajuda ao usuário: Podemos oferecer ajuda ao usuário, como dicas de como corrigir o erro.
Conclusões
A validação de entrada de dados é uma parte importante da criação de formulários confiáveis e eficientes.
No próximo módulo, vamos aprender sobre navegação com React Router.
Vamos aprender como implementar navegação entre páginas e como usar o React Router para controle de rotas.
Até lá, continuem estudando!