VeeValidate para validación basada en esquemas
useForm(), useField(), esquemas de yup, mensajes de error y gestión de validación asíncrona.
VeeValidate para validación basada en esquemas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Escalar con VeeValidate
A medida que los formularios crecen, la validación escrita a mano se vuelve tediosa. VeeValidate es una biblioteca popular de Vue que gestiona el estado del formulario, ejecuta la validación según un esquema y expone los errores, todo de forma reactiva.
Validación basada en esquemas
En lugar de escribir comprobaciones manualmente, describa las reglas de forma declarativa en un esquema. Combinar VeeValidate con yup permite crear ese esquema de forma fluida.
<script setup>
import * as yup from 'yup'
const schema = yup.object({
name: yup.string().required(),
email: yup.string().email().required()
})
</script>Configurar el formulario con useForm
useForm inicializa el estado y la validación del formulario. Pase el esquema como validationSchema y la función se encargará de conectarlo todo.
<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
validationSchema: schema
})
</script>Conectar un campo con useField
useField registra un campo de entrada por su nombre. Devuelve el value del campo, su errorMessage y un controlador handleBlur.
<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>Vincular el campo en la plantilla
Vincule el value devuelto con v-model y conecte @blur a handleBlur para validar al perder el foco.
<template>
<input v-model="name" @blur="handleBlur" />
<span>{{ errorMessage }}</span>
</template>Mostrar el mensaje de error
Cada campo expone su propio errorMessage, que es una cadena reactiva. Está vacío cuando el campo es válido y contiene el mensaje del esquema cuando no lo es.
<template>
<input v-model="name" @blur="handleBlur" />
<span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>Gestionar el envío
handleSubmit envuelve su función de envío. Ejecuta primero la validación y solo llama a su función de devolución de llamada con los valores si todo el formulario es válido.
<script setup>
const onSubmit = handleSubmit((values) => {
console.log('valid form', values)
})
</script>
<template>
<form @submit="onSubmit">...</form>
</template>Errores del formulario
El objeto errors de useForm asigna los nombres de los campos a sus mensajes actuales, algo práctico para crear un resumen o una interfaz condicional.
<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>Por qué usar una biblioteca
- Los esquemas declarativos sustituyen las comprobaciones manuales repetitivas.
- Temporización integrada de la validación al perder el foco, cambiar el valor y enviar.
errorMessagepor campo yerrorspara todo el formulario.- Reglas asíncronas y entre campos sencillas mediante yup.
Componentes frente a Composition API
VeeValidate también ofrece los componentes <Form> y <Field> para un estilo centrado en la plantilla. Las funciones de composición useForm y useField encajan mejor con <script setup> y ofrecen un mayor control.
Validación manual frente a basada en esquemas
La validación manual enseña los mecanismos y resulta adecuada para formularios muy pequeños. La validación basada en esquemas con VeeValidate y yup se adapta a formularios grandes y complejos con mucho menos código y menos errores.
Comprobación rápida
Compruebe sus conocimientos sobre VeeValidate.
Recapitulación
Validación basada en esquemas con VeeValidate:
- Describa las reglas en un esquema de
yupque se pase comovalidationSchema. useFormgestiona el estado del formulario,errorsyhandleSubmit.useFielddevuelvevalue,errorMessageyhandleBlurpara cada campo de entrada.- Se adapta mucho mejor que la validación manual a los formularios grandes.
Preguntas frecuentes
¿La lección «VeeValidate para validación basada en esquemas» es gratis?
Sí — el texto completo de «VeeValidate para validación basada en esquemas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «VeeValidate para validación basada en esquemas»?
useForm(), useField(), esquemas de yup, mensajes de error y gestión de validación asíncrona. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «VeeValidate para validación basada en esquemas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- v-model en todos los elementos de formulario
- Envío y restablecimiento de formularios
- Patrones de validación manual
- VeeValidate para validación basada en esquemas