Validaciones de Formularios en Vue con Vest

Rate this content
Bookmark

Los formularios en la web siempre han estado con nosotros, pero aún parece que siempre tienes que luchar con ellos para que la validación funcione como lo planeaste, e incluso con las mejoras significativas que nos brindan las bibliotecas y frameworks modernos, el mantenimiento sigue siendo en su mayoría una molestia.

Vest es una nueva generación de framework de validación de formularios. Toma su sintaxis y estilo de los frameworks de pruebas unitarias como Mocha o Jest (de ahí el nombre), lo que aporta la elegancia y la naturaleza declarativa de estos frameworks al mundo de la validación de formularios, reduciendo en gran medida la sobrecarga necesaria para escribir, mantener y reutilizar validaciones en tus aplicaciones JS.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

VEST es un marco de validación de formularios inspirado en bibliotecas de pruebas unitarias como Mocha o Jest, creado por Aviatar, un ingeniero de front-end en Facebook.

VEST utiliza un enfoque similar al de las pruebas unitarias, siendo declarativo y permitiendo describir comportamientos esperados y condiciones de prueba en la validación de formularios, como se hace en las pruebas unitarias.

VEST está diseñado para ser utilizado en aplicaciones web, en particular se demostró su uso en aplicaciones Vue, aunque puede adaptarse a otros frameworks sin problemas.

VEST permite una estructura clara y reutilizable para las validaciones, apoyándose en patrones de pruebas unitarias que facilitan la escritura y mantenimiento del código. Además, es independiente de la lógica de UI y puede ser utilizado en múltiples contextos y frameworks.

Sí, VEST permite realizar validaciones asíncronas, como verificar si un nombre de usuario ya está en uso, mediante el uso de promesas o funciones asíncronas dentro de las suites de validación.

VEST por sí mismo no soporta validaciones de tipo de archivo directamente debido a su naturaleza genérica y flexible, pero permite extender sus funcionalidades con bibliotecas externas que sí manejen este tipo de validaciones.

Sí, VEST puede integrarse con Nuxt, Vuex y otras bibliotecas ya que es un marco versátil que funciona independientemente del framework utilizado, facilitando su integración en diferentes entornos de desarrollo.

Evyatar Alush
Evyatar Alush
21 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

VEST es un framework de validación de formularios inspirado en las bibliotecas de pruebas unitarias. Proporciona un enfoque estructurado para la validación de formularios, facilitando el mantenimiento y la reutilización. VEST admite múltiples validaciones por campo, validaciones de advertencia, validación de campos interdependientes, validaciones asíncronas y memoización. Es ligero y se puede integrar con varios frameworks y bibliotecas. El orador está abierto a la colaboración y contribuciones para agregar una interfaz reactiva utilizando el modelo de reactividad de VUE.
Available in English: Vue Form Validations with Vest

1. Introducción a VEST y la motivación detrás de él

Short description:

Soy Aviatar, un ingeniero de front-end en Facebook y el autor de VEST, un marco de validación de formularios inspirado en bibliotecas de pruebas unitarias. Hoy les mostraré cómo VEST puede mejorar las validaciones de formularios en aplicaciones Vue. Antes de sumergirnos en VEST, permítanme explicar la motivación detrás de él. Anteriormente, luché con la falta de estructura al agregar validaciones a los formularios. Esto dificultaba el mantenimiento y la reutilización. Inspirado en las pruebas unitarias, desarrollé una estructura para la validación de formularios que permite una fácil descripción del comportamiento deseado y flexibilidad para diferentes características. Vamos a explorar esta estructura con un ejemplo que valida el campo de nombre de usuario.

¡Hola! Soy Aviatar. Soy un ingeniero de front-end en Facebook y soy el autor de VEST. VEST es un marco de validación de formularios inspirado en bibliotecas de pruebas unitarias como Mocha o Jest. Así que si has hecho aunque sea un poco de pruebas unitarias en tu carrera, creo que te sentirás como en casa trabajando con VEST.

Hoy quiero mostrarte cómo podemos usar VEST para mejorar la forma en que escribimos validaciones de formularios en nuestras aplicaciones Vue. Pero antes de comenzar a hablar sobre VEST en sí, quiero mencionar un poco la motivación detrás de VEST y lo que me llevó a escribir VEST en primer lugar.

En mi experiencia escribiendo formularios y construyendo formularios antes de usar VEST, tuve un gran problema de falta de estructura. Estaba tratando de agregar validaciones al formulario y no estaba seguro de dónde debía colocar la lógica de validación. ¿Debería ponerlas dentro de los controladores de cambio? ¿Debería ponerlas en algún lugar de mi función en una biblioteca compartida? ¿Cómo lo escribo? ¿Cómo evito que sea demasiado específico para mi función? Y no hay una estructura específica que las validaciones deban seguir.

Así que terminé haciéndolo funcionar escribiéndolo en algún lugar entre mis controladores y mi función. Pero luego, cuando quería hacer cambios y mantener la función, como agregar más campos en la función o hacer que los campos dependan entre sí o incluso eliminar un campo, era muy, muy difícil porque todo estaba vinculado a la función. Y debido a que todo es muy específico de la función, también era muy difícil aprovecharlo nuevamente. Por ejemplo, tomarlo y usarlo en un formulario diferente o en una función diferente, como el campo de contraseña en restablecer contraseña e iniciar sesión.

Todo esto me llevó a pensar en una solución. Y hace un par de años, cuando trabajaba con un empleador anterior, acabábamos de comenzar a escribir pruebas unitarias para nuestras aplicaciones. Y vi que los patrones que tienen las pruebas unitarias, que tenemos esa suite de pruebas con descripciones y expectativas. Y se parecía mucho a la forma en que estaba pensando en la validación de formularios en mi mente. Porque las pruebas unitarias son declarativas por naturaleza, por lo que puedes describir exactamente lo que quieres que suceda. Y junto con eso, son muy buenos para expresar lo que hay en comparación con cómo debería ser. Entonces pones una función en una prueba, y lo mismo ocurre con la validación de formularios.

Entonces quiero que mis valores, mis datos, pasen por algunas pruebas. Y todo parece muy relevante para el mundo de la validación de formularios. Por supuesto, no es exactamente lo mismo, y la terminología es diferente, y no ejecutamos pruebas unitarias en producción. Pero con algunos ajustes de diseño, pude llegar a algo que todavía es muy similar a la forma en que escribimos pruebas unitarias y sigue siendo muy relevante para la validación de formularios. Y la estructura que se me ocurrió es esta. Primero creamos una suite separada del código de nuestra función y agregamos un callback a ella. Dentro del callback, agregamos nuestras pruebas, similares a las pruebas de pruebas unitarias, con un campo adicional o un parámetro adicional, que es el nombre del campo que estamos validando. Entonces, en este caso, tenemos una prueba y estamos probando el nombre de usuario. Y luego tenemos el error que el usuario recibirá en caso de un fallo de validación. El nombre de usuario debe tener al menos tres caracteres.

2. Using VEST with a Real Live Vue App

Short description:

Dentro del callback de esa prueba, tenemos nuestras afirmaciones. Quiero mostrarte cómo funciona con una aplicación Vue en vivo real. Esta es nuestra aplicación, una aplicación básica sin ninguna validación todavía. Agregué componentes de entrada para el estilo, nombres de clase para error, advertencia y éxito, props para errores y advertencias, un spinner de carga y una función de validación vacía. Creemos nuestra suite e importemos create de VEST.

Y dentro del callback de esa prueba, tenemos nuestras afirmaciones. Así como assert o expect, hacemos cumplir que data.username sea más largo que dos, o cualquier validation que tengamos allí. Y quiero mostrarte cómo funciona con una aplicación Vue en vivo real.

Solo ten en cuenta que aquí estoy usando la API de opciones, pero también podría funcionar con la API de composición sin ningún cambio en el código de VEST.

Entonces esta es nuestra aplicación. Es una aplicación muy básica sin ninguna validación todavía. Agregué algunos componentes de entrada que están allí solo para el estilo. Agregué algunos nombres de clase. Agregué un nombre de clase para error. Lo convierte en rojo. Permíteme refrescar. Ok, se vuelve rojo. Agregué un nombre de clase para advertencia. Eso lo vuelve naranja y uno para éxito. Eso lo vuelve verde. Junto con eso, también agregué algunas props. Una para errores. Toma una matriz de cadenas. Y cuando se muestra, muestra el error en el campo. Lo mismo para las advertencias. También agregué un spinner de carga porque más adelante vamos a hacer algunas validaciones asíncronas. Entonces, loading es verdadero. Y vamos a ver un spinner. Eso es todo lo que tenemos aquí. También tenemos la función de validación, que está vacía. Toma el nombre y el valor del campo que estamos validando. Y creemos nuestra suite. Fuente. Y vamos a importar create de VEST.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.