Imagen de perfil

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 VeeValidate con el siguiente comando.

npm install vee-validate --save

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.

  • @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.

10 junio, 2019
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register