Validar formularios con Vuejs 2 y VeeValidate

Fecha de publicación: junio 10, 2019

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

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.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login