Validación personalizada de formularios con Vue.js

Introducción

En este proyecto, aprenderás a implementar un validador de formularios personalizado utilizando Vue.js. El validador de formularios personalizado te permite validar los campos del formulario y comprobar la validez de los datos antes de que el usuario envíe el formulario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar el componente FormInput para actualizar el valor de v-model del componente cuando cambia el valor del campo de entrada.
• Cómo implementar la función is_email para validar la dirección de correo electrónico según reglas específicas.
• Cómo implementar la función validateForm para validar los datos del formulario según las reglas de validación definidas.

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un validador de formularios personalizado en Vue.js.
• Validar los campos del formulario utilizando reglas de validación personalizadas.
• Manejar los errores de validación del formulario y mostrarlos al usuario.

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

Donde:

• index.html es la página principal.
• css es la carpeta para almacenar los estilos del proyecto.
• lib es la carpeta para almacenar las dependencias del proyecto.
• components/FormInput.js es el componente input.
• components/FormValidator.js es el componente validador de formularios.
• js/util.js es la función de utilidad requerida por el proyecto.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar el componente FormInput

En este paso, aprenderás a implementar el componente FormInput para actualizar el valor de v-model del componente en index.html cuando cambia el valor del campo de entrada.

1. Abre el archivo FormInput.js ubicado en el directorio components.

2. En la función setup del componente FormInput, encuentra la sección TODO para el objetivo 1.

3. Implementa el código para desencadenar un evento que actualice el valor de v-model del componente cuando cambia el valor del campo de entrada (con la clase form-input).

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });

   Este código utiliza la función watch para observar los cambios en la variable reactiva inputValue. Cuando el valor cambia, emite un evento con el nuevo valor para actualizar el enlace de v-model en el componente padre.

4. Guarda los cambios en el archivo FormInput.js.

Implementar la función is_email

En este paso, aprenderás a implementar la función is_email en el archivo util.js para validar la dirección de correo electrónico.

1. Abre el archivo util.js ubicado en el directorio js.

2. En la función is_email, encuentra la sección TODO para el objetivo 2.

3. Implementa la lógica para validar la dirección de correo electrónico según los requisitos proporcionados:

   • La dirección de correo electrónico debe tener entre 6 y 20 caracteres de longitud.
   • La dirección de correo electrónico debe constar de una parte de nombre de usuario y una parte de dominio, separadas por el símbolo @.
   • La parte de nombre de usuario debe tener al menos 1 carácter de longitud y puede contener dígitos o letras.
   • La parte de dominio debe contener un . en el medio, y la parte antes del . debe tener al menos 1 carácter de longitud, mientras que la parte después del . debe tener de 2 a 4 letras.

   Aquí hay una implementación de ejemplo:

   const is_email = (val) => {
     const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
     return emailRegex.test(val);
   };

4. Guarda los cambios en el archivo util.js.

Implementar la función validateForm

En este paso, aprenderás a implementar la función validateForm en el archivo FormValidator.js para validar los datos del formulario.

1. Abre el archivo FormValidator.js ubicado en el directorio components.

2. En la función validateForm, encuentra la sección TODO para el objetivo 3.

3. Implementa la lógica para validar los datos del formulario según el objeto formRules proporcionado. La validación debe seguir estas reglas:

   1. Si el campo nickname está vacío, agrega un mensaje de error al objeto errors con la clave "nickname".
   2. Para el campo email:
   • Si el campo está vacío, agrega un mensaje de error al objeto errors con la clave "email".
   • Si la dirección de correo electrónico no cumple con las reglas o no está dentro del rango de longitud correcto, agrega un mensaje de error al objeto errors con la clave "email".

   Aquí hay una implementación de ejemplo:

   const validateForm = () => {
     return new Promise((resolve, reject) => {
       errors.value = {}; // Limpia el mensaje de error anterior
   
       // Valida el nickname
       try {
         props.rules.nickname.map((item) => {
           item?.validator(null, props.formData.nickname, (err) => {
             if (err) {
               throw "nickname|" + err.message;
             }
           });
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       // Valida el email
       try {
         props.rules.email.map((item) => {
           if (item?.required) {
             if (props.formData.email == "") throw "email|" + item.message;
           }
           if (item?.type) {
             if (!validateByType(item.type, props.formData.email))
               throw "email|" + item.message;
             if (props.formData.email.length < 6) throw "email|" + item.message;
             if (props.formData.email.length > 20)
               throw "email|" + item.message;
           }
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       if (hasErrors.value) {
         resolve(false); // Existe un error, la validación falló
       } else {
         resolve(true);
       }
   
       emit("valid", errors.value);
     });
   };

4. Guarda los cambios en el archivo FormValidator.js.

¡Felicitaciones! Has completado la implementación del validador de formularios personalizado. Ahora puedes probar la aplicación ejecutando el proyecto e interactuando con el formulario. El efecto final es el siguiente:

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.