Form Validation Validação de Formulário
Última atualização: 2026-11-03
Form Validation Validação de Formulário
A essência da validação é derivar erros a partir do estado: uma função de validação calcula um objeto de erros, o objeto todo é verificado uma vez antes de enviar, e quando algo está errado o envio é bloqueado e a mensagem é renderizada. Mensagens de erro também são UI, então a renderização condicional basta — nenhum trabalho imperativo com o DOM é necessário. Como os erros são calculados durante a renderização, eles jamais ficam fora de sincronia com os campos que descrevem, o que elimina toda uma classe de bugs de mensagens obsoletas.
| Grupo | Padrões de Componentes |
|---|---|
| Tipo | Padrão |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
const errors = validate(values) // derive errors from state
const hasError = Object.keys(errors).length > 0
<form onSubmit={e => {
e.preventDefault() // block the browser default submit
if (!hasError) submit(values)
}}>Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Quando o e-mail está sem @ ou a senha tem menos de 6 caracteres, clicar em "Register" mostra um erro vermelho abaixo do campo correspondente; quando ambos estão válidos, a página mostra "Registered successfully".💡 Pontos-chave
🏷️ Mais Padrões de Componentes
💡 Casos Relacionados
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
