Vuejs: Formularios y validación

En esta lección, exploraremos cómo trabajar con formularios y validación en Vue 3.5. La gestión adecuada de formularios y su validación son aspectos esenciales en el desarrollo de aplicaciones web. Vue 3.5 ofrece una serie de herramientas y técnicas para facilitar estas tareas.

Creación de formularios en Vue 3.5

Para empezar, vamos a crear un formulario básico en Vue 3.5. Utilizaremos v-model para enlazar datos y @submit.prevent para manejar la presentación del formulario:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Nombre:</label>
      <input type="text" id="name" v-model="name" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />
    </div>
    <button type="submit">Enviar</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      console.log('Nombre:', this.name);
      console.log('Email:', this.email);
    }
  }
};
</script>

En este ejemplo, el formulario está compuesto por dos campos: nombre y email. Utilizamos v-model para enlazar cada campo a una propiedad del objeto data de Vue. La directiva @submit.prevent evita el comportamiento por defecto del formulario y llama al método submitForm cuando se envía el formulario.

Validación de formularios

Vue 3.5 no incluye un sistema de validación integrado, pero podemos utilizar bibliotecas externas como Vuelidate o vuelidate-next para añadir validaciones. A continuación, mostraremos un ejemplo utilizando Vuelidate:

Instalación de Vuelidate

Primero, instalamos Vuelidate:

npm install @vuelidate/core @vuelidate/validators

Integración de Vuelidate en el formulario

Ahora, integremos Vuelidate en nuestro formulario:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Nombre:</label>
      <input type="text" id="name" v-model="name" />
      <span v-if="!$v.name.required">El nombre es requerido</span>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />
      <span v-if="!$v.email.required">El email es requerido</span>
      <span v-if="!$v.email.email">El email no es válido</span>
    </div>
    <button type="submit">Enviar</button>
  </form>
</template>

<script>
import { required, email } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'

export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  validations() {
    return {
      name: { required },
      email: { required, email }
    };
  },
  setup() {
    return { v$: useVuelidate() };
  },
  methods: {
    submitForm() {
      this.v$.$touch();
      if (this.v$.$invalid) {
        console.log('Formulario inválido');
        return;
      }
      console.log('Nombre:', this.name);
      console.log('Email:', this.email);
    }
  }
};
</script>

En este ejemplo, hemos añadido validación para los campos de nombre y email. La validación se realiza utilizando las reglas required y email de Vuelidate. La directiva v-if se usa para mostrar mensajes de error cuando los campos no cumplen con las reglas de validación.

Vue 3.5 y Vuelidate juntos proporcionan una manera efectiva de gestionar formularios y validación en aplicaciones web, asegurando que los datos ingresados por los usuarios sean correctos y completos.