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.