0Pricing
Vue Academy · Aula

Padrões de validação manual

Objetos de erro reativos, validação ao perder o foco versus ao enviar e correspondência de confirmação de senha.

Padrões de validação manual é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Validando sem uma biblioteca

Para formulários simples, você pode validar manualmente usando estado reativo. Acompanhe os erros, execute verificações no envio ou ao perder o foco e exiba mensagens com diretivas. Isso ensina os fundamentos sobre os quais toda biblioteca é construída.

Um objeto de erros

Mantenha um objeto reativo errors indexado pelo nome do campo. Uma string vazia (ou uma chave ausente) significa que não há erro.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

Uma função de validação

Escreva uma função validate que verifique cada campo e defina mensagens no objeto de erros. Retorne um valor que indique se o formulário é válido.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

Validando no envio

Chame validate no início do seu manipulador de envio e interrompa a execução se a validação falhar. Isso garante que nenhum dado inválido seja enviado.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

Validação por campo ao perder o foco

Validar somente no envio pode parecer lento. Valide um único campo quando o usuário sair dele usando @blur para obter feedback imediato.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

Exibindo mensagens de erro

Use v-if para exibir uma mensagem somente quando esse campo tiver um erro. Coloque-a perto do campo de entrada.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

Estilizando campos inválidos

Vincule uma classe usando a sintaxe de objeto para adicionar uma borda vermelha quando existir um erro. A classe se aplica somente enquanto errors.name for avaliado como verdadeiro.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

O estilo de erro

Uma pequena regra de CSS completa o visual — uma borda vermelha sinaliza que o campo precisa de atenção.

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

Validade calculada

Derive um indicador geral de validade com computed para habilitar ou desabilitar o botão de envio de forma reativa.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

Pontos fortes e limitações

A validação manual é transparente e não exige dependências, sendo ideal para formulários pequenos. Porém, à medida que as regras aumentam — verificações entre campos, validação assíncrona e muitos campos — o código repetitivo se acumula, e é por isso que as bibliotecas existem.

Resumo do fluxo de validação

O padrão é: erros reativos, uma função de validação, executá-la no envio (e opcionalmente ao perder o foco), exibir mensagens com v-if e aplicar estilo com uma classe condicional.

Verificação rápida

Teste seus conhecimentos sobre validação manual.

Recapitulação

Padrões de validação manual:

  • Mantenha um objeto reativo errors indexado pelo campo.
  • Uma função validate define mensagens e retorna a validade.
  • Valide no envio e por campo usando @blur para obter feedback rápido.
  • Exiba mensagens com v-if="errors.x" e aplique estilo com :class="{ error: errors.x }".

Perguntas Frequentes

A aula “Padrões de validação manual” é grátis?

Sim — o texto completo de “Padrões de validação manual” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Padrões de validação manual”?

Objetos de erro reativos, validação ao perder o foco versus ao enviar e correspondência de confirmação de senha. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Padrões de validação manual”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. v-model em todos os elementos de formulário
  2. Envio e redefinição de formulários
  3. Padrões de validação manual
  4. VeeValidate para validação baseada em esquemas
← Voltar para Vue Academy