register.php

📌 Propósito

register.php es la página de registro de la aplicación web. Permite que nuevos usuarios creen una cuenta proporcionando su nombre, correo electrónico y contraseña. Incluye validación en tiempo real para garantizar que los datos introducidos sean correctos antes de enviarse.

⚙️ Funcionalidades clave

Formulario de registro:
Los usuarios pueden crear una cuenta ingresando su nombre completo, correo electrónico, contraseña y confirmación de contraseña.

Validación en tiempo real:
Gracias al script validation.js, los campos se validan en el momento, mostrando errores si hay formatos inválidos o si las contraseñas no coinciden.

Notificaciones de error:
Se utilizan notificaciones visuales mediante la librería Notyf para informar al usuario de errores en la validación, como campos vacíos, contraseñas débiles o no coincidentes.

Estilo responsivo:
Diseñado para adaptarse correctamente tanto en escritorio como en dispositivos móviles.

🌄 Imágenes

Estructura común

register.php mantiene la misma estructura base del sitio, reutilizando los siguientes componentes:

• header.php: Navegación principal del sitio.
• footer.php: Pie de página con enlaces legales y de interés.
• mobileMenu.php: Menú que se muestra en versión móvil.

🧩 Archivos relacionados

• validation.js: Se encarga de validar los campos del formulario de registro. Verifica que el nombre no esté vacío, que el email tenga un formato válido, que la contraseña cumpla los requisitos de seguridad y que ambas contraseñas coincidan.
• notyf.min.js y notyf.min.css: Librería usada para mostrar alertas visuales si algún campo está incorrecto.

💡 Detalles técnicos

1. Validación de campos (validation.js):

   • Nombre: No puede estar vacío.
   • Correo electrónico: Debe tener un formato válido.
   • Contraseña: Mínimo 8 caracteres, con al menos una mayúscula y un número.
   • Confirmación de contraseña: Debe coincidir exactamente con la contraseña.

   Si algún campo no cumple con las condiciones, se evita el envío del formulario y se muestra un mensaje de error con Notyf.

   if (!nombre.value.trim()) {
       // nombre vacío
   }
   
   if (!regexEmail.test(email.value.trim())) {
       // formato de correo inválido
   }
   
   if (!regexPassword.test(password.value.trim())) {
       // contraseña insegura
   }
   
   if (password.value.trim() !== confirmPassword.value.trim()) {
       // las contraseñas no coinciden
   }

2. Prevención de envío sin validación:
   El evento submit del formulario está interceptado. Si hay errores, no se envía y se notifican visualmente. El envío real (form.submit()) está comentado hasta que se implemente un backend.

🛠️ Dependencias

• Notyf: Para mostrar alertas en caso de errores en la validación.
• JavaScript (validation.js): Para validar todos los campos del formulario antes del envío.