0Pricing
Vue Academy · Aula

VeeValidate para validação baseada em esquemas

useForm(), useField(), esquemas yup, mensagens de erro e tratamento de validação assíncrona.

VeeValidate para validação baseada em esquemas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.

Expandindo com VeeValidate

À medida que os formulários crescem, escrever a validação manualmente se torna trabalhoso. VeeValidate é uma biblioteca popular do Vue que gerencia o estado do formulário, executa a validação com base em um schema e expõe os erros — tudo de forma reativa.

Validação baseada em schema

Em vez de escrever verificações manualmente, descreva as regras de forma declarativa em um schema. Combinar VeeValidate com yup permite criar esse schema de maneira fluida.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

Configurando o formulário com useForm

useForm inicializa o estado e a validação no nível do formulário. Passe seu schema como validationSchema para conectar tudo.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

Conectando um campo com useField

useField registra um campo de entrada pelo nome. Ele retorna o value do campo, seu errorMessage e um manipulador handleBlur.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

Vinculando o campo no template

Vincule o value retornado com v-model e conecte @blur a handleBlur para validar ao perder o foco.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

Exibindo a mensagem de erro

Cada campo expõe seu próprio errorMessage, que é uma string reativa. Ela fica vazia quando o campo é válido e contém a mensagem do schema quando ele é inválido.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

Lidando com o envio

handleSubmit envolve sua função de envio. Ele executa a validação primeiro e só chama seu retorno de chamada com os valores se o formulário inteiro for válido.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

Erros no nível do formulário

O objeto errors de useForm mapeia os nomes dos campos para suas mensagens atuais, sendo útil para um resumo ou uma interface condicional.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

Por que usar uma biblioteca

  • Schemas declarativos substituem verificações manuais repetitivas.
  • Tempos integrados de validação ao perder o foco, ao alterar e ao enviar.
  • errorMessage por campo e errors no nível do formulário.
  • Regras assíncronas e entre campos fáceis de definir com yup.

Componentes versus API de composição

VeeValidate também oferece os componentes <Form> e <Field> para um estilo voltado primeiro ao template. As funções de composição useForm e useField se adaptam melhor a <script setup> e oferecem mais controle.

Manual versus baseado em schema

A validação manual ensina os mecanismos e é adequada para formulários minúsculos. A validação baseada em schema com VeeValidate e yup escala para formulários grandes e complexos com muito menos código e menos erros.

Verificação rápida

Teste seus conhecimentos sobre VeeValidate.

Recapitulação

Validação baseada em schema com VeeValidate:

  • Descreva as regras em um schema yup passado como validationSchema.
  • useForm gerencia o estado do formulário, errors e handleSubmit.
  • useField retorna value, errorMessage e handleBlur para cada campo de entrada.
  • Ela escala muito melhor do que a validação manual para formulários grandes.

Perguntas Frequentes

A aula “VeeValidate para validação baseada em esquemas” é grátis?

Sim — o texto completo de “VeeValidate para validação baseada em esquemas” é 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 “VeeValidate para validação baseada em esquemas”?

useForm(), useField(), esquemas yup, mensagens de erro e tratamento de validação assíncrona. 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 4 de 4.

Quanto tempo leva a aula “VeeValidate para validação baseada em esquemas”?

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