Vue Academy · Lección

Patrones de validación manual

Objetos de error reactivos, validación al perder el foco frente al envío y coincidencia de confirmación de contraseña.

Patrones de validación manual es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.

Validación sin una biblioteca

En formularios sencillos, puede validar manualmente mediante un estado reactivo. Controle los errores, ejecute comprobaciones al enviar o al perder el foco y muestre mensajes con directivas. Esto le enseña los fundamentos en los que se basa toda biblioteca.

Un objeto de errores

Mantenga un objeto reactivo errors cuyas claves sean los nombres de los campos. Una cadena vacía (o una clave inexistente) significa que no hay ningún error.

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

Una función validate

Escriba una función validate que compruebe cada campo y establezca los mensajes en el objeto de errores. Devuelva si el formulario es 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>

Validar al enviar

Llame a validate al principio del controlador de envío y detenga la ejecución si falla. Así se garantiza que no se envíen datos no válidos.

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

Validación de cada campo al perder el foco

Validar únicamente al enviar puede resultar lento. Valide un solo campo cuando el usuario salga de él mediante @blur para ofrecer comentarios inmediatos.

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

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

Mostrar mensajes de error

Use v-if para mostrar un mensaje únicamente cuando ese campo tenga un error. Colóquelo cerca del campo de entrada.

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

Aplicar estilos a los campos no válidos

Vincule una clase mediante la sintaxis de objeto para añadir un borde rojo cuando exista un error. La clase se aplica únicamente mientras errors.name sea verdadero.

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

El estilo error

Una pequeña regla CSS completa el aspecto: un borde rojo indica que el campo requiere atención.

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

Validez calculada

Derive un indicador de validez general con computed para habilitar o deshabilitar reactivamente el botón de envío.

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

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

Ventajas y limitaciones

La validación manual es transparente y no requiere dependencias, por lo que resulta ideal para formularios pequeños. Sin embargo, a medida que aumentan las reglas —comprobaciones entre campos, validación asíncrona y muchos campos— el código repetitivo se acumula; por eso existen las bibliotecas.

Resumen del flujo de validación

El patrón es el siguiente: errores reactivos, una función validate, ejecutarla al enviar (y, opcionalmente, al perder el foco), mostrar mensajes con v-if y aplicar estilos con una clase condicional.

Comprobación rápida

Compruebe sus conocimientos sobre la validación manual.

Recapitulación

Patrones de validación manual:

Mantenga un objeto reactivo errors cuyas claves sean los campos.
Una función validate establece los mensajes y devuelve si el formulario es válido.
Valide al enviar y cada campo mediante @blur para ofrecer comentarios rápidos.
Muestre los mensajes con v-if="errors.x" y aplique estilos con :class="{ error: errors.x }".

Preguntas frecuentes

¿La lección «Patrones de validación manual» es gratis?

Sí — el texto completo de «Patrones de validación manual» 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 «Patrones de validación manual»?

Objetos de error reactivos, validación al perder el foco frente al envío y coincidencia de confirmación de contraseña. 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 3 de 4.

¿Cuánto tiempo toma la lección «Patrones de validación manual»?

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

← Volver a Vue Academy