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. https://gist.github.com/anonymous/f75f8810d513cdd5db6def927dc2a090
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.
https://gist.github.com/anonymous/4b266a493c02143520320a969cd0ddcd
- @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.