Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Validar un Formulario con Vue JS 3 – Parte 1

Demo

En diferentes ocasiones hemos trabajado la validación de formularios de manera reactiva, especificamente hemos trabajado con Angular y React JS. Pero hasta la fecha no habiamos  trabajado esto con Vue JS. Este tutorial es un buen momento para hacerlo. La validación de formulario con Vue es sencilla, una vez que aprendas como hacerlo, posteriormente se te hará más fácil. En este post te enseñaré a Como Validar un Formulario con Vue JS 3 – Parte 1, vamos con ello.

Partes

La validación de formularios con Vue JS es fácil y también puedes hacerla reactiva

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “No Encuentro Empleo Por Mi Edad ¿ Que Puedo Hacer ?y “¿ Qué Es NoCode Development ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Validar un Formulario con Vue JS 3 – Parte 1.

 Como Validar un Formulario con Vue JS 3

Empezaremos creando un nuevo proyecto, el proyecto lo crearé con Vite JS, los pasos para crear el proyecto Vue JS con Vite JS son sencillos y fáciles de hacer (Si ya tienes creado tu proyecto, puedes saltar el paso de creación de proyecto).

Crear Nuevo Proyecto

Abro la consola de comando y ejecutamos el siguiente comando para crear un nuevo proyecto, al proyecto le daré el nombre vuejs3-validarformulario, tu le puedes poner el nombre que desees, luego de colocarle el nombre presionamos la tecla ENTER para continuar:


Luego elegimos el framework Vue y presionamos la tecla ENTER:


Paso seguido elegimos JavaScript como variante y presionamos ENTER:


Vite JS comenzará a crear el proyecto y al final nos muestra ciertos pasos que debemos seguir para completar la creación del proyecto:


Entonces realizamos los 3 pasos correspondientes en la consola de comandos:


Luego de ejecutar el último comando es decir el comando npm run dev, podemos  ver que Vite JS nos muestra una ruta local, la cual debemos abrir en el navegador, si la abrimos podemos ver que nuestro proyecto se esta ejecutando correctamente:

Proyecto Vue JS creado con Vite JS corriendo en su ambiente de desarrollo nativo

Con ello verificamos que nuestro proyecto se ha creado correctamente y podemos trabajar en nuestro formulario. Asimismo se nos ha creado la siguiente estructura de archivos y directorio para el proyecto:


Ahora pasemos a crear el formulario HTML en Vue JS 3.

Creación del formulario

Para la vista usaré Bootstrap 5, esto es opcional si deseas puedes usarlo o puedes usar tus propios estilos CSS o framework. Abro el archivo llamado App.vue que se encuentra en vuejs3-validarformulario > src > App.vue


Dentro del archivo App.vue agrego lo siguiente, básicamente es la estructura de un formulario HTML:


Si voy al navegador, puedo ver que el formulario se muestra correctamente:

Formulario HTML creado con Vue JS

Bien hasta aquí llegamos con esta primera Parte en donde creamos un nuevo proyecto Vue JS con Vite JS y un formulario HTML con Bootstrap 5 el cual empezaremos a validar.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil