Validar formularios con Vuejs 2 y VeeValidate

Validar formularios con Vuejs 2 y VeeValidate
Validar formularios con Vuejs 2 es muy sencillo, y más aún si lo hacemos utilizando el plugin VeeValidate, en este tutorial vamos a ver una introducción para aprender a configurarlo y hacer nuestras primeras validaciones.

Lo primero que debemos hacer es instalar el plugin con el siguiente comando.

Ahora vamos a realizar la configuración más sencilla que existe en VeeValidate.

Una vez tenemos todo configurado, vamos a crear 2 componentes, 1 centralizado para mostrar todos los errores de formulario, y otro que representará nuestro formulario y la lógica para procesarlo.

Curso completo de Vuejs 2 y Vuex

¿Todavía no conoces Vuejs 2 y Vuex?, en cursosdesarrolloweb.es tienes un curso completo para aprender a trabajar con Vuejs 2 y Vuex utilizando las últimas versiones con ejemplos fáciles y útiles.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

  • @submit.prevent=”validateBeforeSubmit”: Evitamos el comportamiento por defecto de un form y ejecutamos el método validateBeforeSubmit al hacer submit.
  • v-validate=”{rules}”: Aquí podemos aplicar las reglas que necesitemos.
  • :class=”{‘has-errors’: errors.has({field})}”: Aplicamos la clase has-errors si existen errores.
  • Componente FormError: Le pasamos el nombre del campo y el objeto errors que nos proporciona VeeValidate para mostrar el correspondiente error en cada caso.
  • v-validate=”‘required|confirmed:password'”: Nos aseguramos que los passwords son los mismos.
  • this.$validator.validateAll(): Ejecuta el form y si existen errores los muestra.

Así de sencillo es validar formularios con Vuejs 2 y VeeValidate, sólo tienes que procesar el formulario y verás cómo todo funciona.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Nuevo Curso de Vuejs 2 Avanzado con Vuex y AdonisJs 4Acceder ahora
+ +