Validación Progresiva de Formularios en Vue.js

Hola, gracias por estar aquí. Mi nombre es Abdurrahman Awad y hoy les hablaré sobre la validación progresiva de formularios en Vue.js. Un poco sobre mí, soy un ingeniero senior de front-end en Octoboots. Creé y mantengo vValidate desde 2016. Escribo sobre Vue.js en mi blog logarithm.com. Así que si están buscando ese tipo de contenido, échenle un vistazo.

Los formularios son difíciles, pero ¿qué los hace así? Hay algunos puntos problemáticos que siempre encontramos al construir nuestros formularios. Primero, está el seguimiento de valores. El seguimiento de valores generalmente implica declarar los valores, rastrearlos o manejar los cambios y almacenarlos para su posterior uso, como enviarlos a una API o lo que sea. También tenemos desafíos con la validación, como la validación síncrona, la validación asíncrona y la validación a nivel de formulario, validación a nivel de campo. Los mensajes de error también pueden tener sus propios desafíos, como la localización. También está la interfaz de usuario y la experiencia de usuario. También está la organización. ¿Cómo vas a organizar tus grandes formularios o múltiples formularios? También está la depuración de la experiencia del desarrollador, que puede que ni siquiera exista en la solución que estás usando actualmente. Entonces, todos estos aspectos son abordados de alguna manera por vValidate, pero primero hablemos un poco sobre ello.

En este momento, vValidate es la biblioteca de validación de formularios de Vue.js más popular, con aproximadamente 1.4 millones de descargas al mes y 8.6 estrellas en GitHub. Los objetivos de vValidate son resolver estos principales problemas. También ofrecer una API progresiva que se ajuste a la ideología de Vue.js de ser un framework progresivo de JavaScript , lo que significa que admite a usuarios que solo usan JavaScript como una capa de mejora para sus aplicaciones existentes y a usuarios que usan JavaScript para hacer todo en sus aplicaciones, como renderizar toda la aplicación en aplicaciones de una sola página. También está el enfoque de diseño basado en la composición como objetivo, lo que significa que puedes componer la lógica de validación e integrarla en tus propios componentes u otros componentes de terceros, lo cual no era posible antes sin la API de composición. Así que hablemos del primer punto problemático importante, el seguimiento de valores, el seguimiento de valores, como dije, implica declarar tus valores, vincularlos a tus entradas y recuperarlos para poder enviarlos de una API a otra. Lo siento. Este es un ejemplo de dicho formulario. El problema con esto es que hay demasiada fricción entre estas tres áreas. Cuando introduces un nuevo campo, siempre tienes que declarar su estado, porque esto es una buena práctica, aunque en Vue 3 ya no es realmente necesario, tienes que vincular el estado y tienes que recuperar su valor. Y si olvidas hacer alguna de estas cosas, tu formulario funcionará incorrectamente, lo cual puede ser muy difícil de depurar. Así que lo que intentaremos hacer aquí es también intentaremos resolver el problema del seguimiento de valores reduciendo la fricción a un único punto de declaración. Ya sea que declares todo en la plantilla o declares todo en el script o una combinación de ambos. Lo que vValidate hace aquí por ti en este ejemplo es que creará el estado requerido para que este formulario funcione sin que tú tengas que hacerlo. Todo lo que tienes que hacer es declarar el formulario y los campos, y vValidate se encargará del resto, incluida la recuperación de estos valores.

Entonces, Validación de Formularios. Esta es la razón principal por la que estás utilizando correctamente vValidate. vValidate te permite validar tus entradas declarando reglas en cada uno de estos campos o entradas. Puedes usar reglas de validación al estilo de Laravel como esta, que ahora está en su propio paquete complementario. Pero tienes otras formas de hacer validación. Puedes usar funciones normales de JavaScript o puedes usar cualquier biblioteca de validación de terceros como validator.js.

En este ejemplo estamos usando Yelp, que es una herramienta de validación de front-end muy popular. Pero lo que realmente destaca de ella es su forma de expresar esquemas de formularios. Así que vValidate ahora también admite esquemas de validación. Los esquemas de validación significan que puedes declarar un esquema para todo el formulario y vValidate validará los campos correctamente. Y asignará los mensajes de error correspondientes. Yelp es realmente bueno aquí y te permite declarar tus esquemas de forma muy declarativa en tu JavaScript.

Hablemos de la parte de mejora progresiva. Aquí tenemos un ejemplo de un formulario muy básico. Es un formulario nativo que envía la acción de registro, por lo que hará una recarga completa de la página y enviará estos campos al punto final de registro. Digamos que tienes esto en algún tipo de framework de backend como Laravel o Rails y en la mayoría de los casos tienes una configuración similar a esta, pero digamos que solo quieres agregar un poco de JavaScript, solo quieres agregar validación del lado del cliente y quieres evitar la presentación para ese campo sin hacer demasiado JavaScript. Puedes hacer eso con vValidate reemplazando el elemento del formulario con el componente de formulario y reemplazando los elementos de entrada con el componente de campo. También puedes agregar un componente de mensaje de error para mostrar los errores y simplemente asignando el esquema de validación al formulario, ya casi has terminado. vValidate entenderá que no estás escuchando el evento de envío, por lo que no estás intentando secuestrar el envío. Eso significa que solo obedecerá el comportamiento predeterminado si el formulario es válido. Entonces, si el usuario intenta enviar y todo es válido, actuará como si no hubiera ningún tipo de JavaScript aquí. Pero si hay errores, evitará el envío, dándote exactamente lo que necesitas.

También tenemos el complemento de herramientas de diferencias que implementamos recientemente en la versión 4.5. Aquí tenemos las herramientas de diferencias de vista y en las herramientas de diferencias de vista notarás un nuevo inspector llamado vValidate. Si haces clic en ese inspector, vValidate te mostrará el formulario tal como lo ve. De un vistazo, vValidate te muestra la validez de los campos, por lo que si comienzo a completar algunos campos aquí, comenzarán a iluminarse en verde. Y eso te da una muy buena idea de qué es válido y qué no lo es. También aquí a la derecha puedes ver una captura de pantalla del formulario, puedes ver sus valores actuales, cualquier error si los hay, por lo que si elimino este verás el error aquí, y todo tipo de información que desees. Además, si haces clic en los campos, verás un resumen similar del estado, y puedes realizar algunas acciones aquí, como borrar todo el formulario, y también puedes forzar su validación. Puedes borrar un solo campo y también puedes forzar su validación.

Eso es todo para esta charla, hay mucho más que puedes hacer con vValidate, que incluye campos de matriz, meta llenada, localización, manejo de envíos e integraciones con bibliotecas de UI. Consulta la documentación para obtener más información sobre esto y ¡gracias!