🤔 ¿Por qué Validar?
Validación = Verificar antes de enviar
La validación asegura que los datos que el usuario ingresa sean correctos y seguros antes de enviarlos al servidor.
Sin validación, podrían pasar cosas como:
- ❌ Email sin @: "pedrogmail.com"
- ❌ Contraseña muy corta: "123"
- ❌ Edad negativa: "-5 años"
- ❌ Campos vacíos obligatorios
🔍 Tipos de Validación
| Tipo | ¿Qué verifica? | Ejemplo |
|---|---|---|
| Requerido | Campo no vacío | Nombre obligatorio |
| Longitud | Mínimo/máximo caracteres | Contraseña mín. 8 caracteres |
| Formato | Patrón específico | Email válido con @ |
| Rango | Valor entre límites | Edad entre 1 y 120 |
| Coincidencia | Dos campos iguales | Confirmar contraseña |
🏷️ Validación con HTML5
HTML5 tiene atributos de validación integrados:
<!-- Campo requerido --> <input type="text" required> <!-- Longitud mínima y máxima --> <input type="text" minlength="3" maxlength="20"> <!-- Email válido --> <input type="email" required> <!-- Número en rango --> <input type="number" min="1" max="100"> <!-- Patrón personalizado (solo letras) --> <input type="text" pattern="[A-Za-z]+">
La validación HTML5 es rápida pero siempre valida también con JavaScript para mayor control y mejores mensajes de error.
⚡ Validación con JavaScript
function validarEmail(email) { // Expresión regular para email const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } function validarFormulario() { const email = document.getElementById('email').value; if (!email) { mostrarError('El email es requerido'); return false; } if (!validarEmail(email)) { mostrarError('Email inválido'); return false; } return true; }
🎮 ¡Prueba la Validación en Vivo!
🎯 Quiz - ¡Demuestra lo que Aprendiste!
1. ¿Qué atributo HTML hace un campo obligatorio?
mandatory
required
obligatory
2. ¿Qué tipo de input valida automáticamente el formato de email?
type="text"
type="email"
type="mail"
3. ¿Para qué sirve el atributo "pattern"?
Dar estilo al campo
Mostrar un placeholder
Definir una expresión regular para validar
4. ¿Cuándo se debe validar con JavaScript además de HTML?
Nunca, HTML5 es suficiente
Siempre, para mayor control y mensajes personalizados
Solo en formularios de pago
⭐
⭐
⭐