120 lines
3.0 KiB
Plaintext
120 lines
3.0 KiB
Plaintext
VALIDACIÓN DE UN FORMULARIO
|
|
|
|
- Los usuarios se equivocan.
|
|
- Los usuarios pueden ser malintencionados.
|
|
|
|
La validación sirve para prevenir esos errores y evitar ataques malintencionados.
|
|
|
|
|
|
La validación es la comprobación de los datos introducidos por el usuario, si la comprobación obtiene resultado positivo los datos se envían, si es negativo se le indican pautas para corregirlos.
|
|
|
|
TIPOS DE VALIDACIÓN
|
|
|
|
- Validación en el front-end (Javascript - Html5)
|
|
- Validación back-end
|
|
- Doble validación front-end y back-end
|
|
|
|
VALIDACIÓN BÁSICA CON HTML5
|
|
|
|
- Existen diferentes atributos para la validación en Html5:
|
|
|
|
+ maxlength y minlength (Tamaño admitido de los campos)
|
|
+ min , max y step (Para valores numéricos y de fechas)
|
|
+ required Campos obligatorios
|
|
+ Disabled o readonly No se pueden modificar(uno no se envía el otro sí)
|
|
|
|
|
|
ESTILOS CSS PARA VALIDACIÓN
|
|
|
|
:invalid (no pasa)
|
|
:valid (pasa)
|
|
|
|
Ejemplo
|
|
|
|
input:invalid,
|
|
select:invalid,
|
|
textarea:invalid {
|
|
/* Estilos para elementos inválidos */
|
|
border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
|
|
background-color: #ffcccc; /* Un fondo de color claro */
|
|
}
|
|
|
|
ATRIBUTO PATTERN
|
|
|
|
Nos permite utilizar expresiones regulares(RegExp) para validar distintos tipos de inputs
|
|
|
|
El atributo title nos permite completar el mensaje de error que ve el usuario para indicarle pautas de introducción de datos.
|
|
|
|
Ejemplos de expresiones regulares para validar datos con el atributo pattern:
|
|
|
|
1.Nombre de persona (sin caracteres especiales):
|
|
|
|
-Solo letras, puede contener espacios.
|
|
-De al menos 2 caracteres.
|
|
|
|
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
|
|
|
|
2.Apellidos (sin caracteres especiales):
|
|
|
|
-Solo letras, puede contener espacios.
|
|
-De al menos 2 caracteres
|
|
|
|
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
|
|
|
|
|
|
3.Edad (números del 1 al 99):
|
|
|
|
-Números del 1 al 99.
|
|
|
|
pattern="[1-9][0-9]?"
|
|
|
|
-De 1 hasta 200 años.
|
|
|
|
pattern="^(1[0-9]{1,2}|[1-9][0-9]?)$"
|
|
|
|
|
|
4.DNI español (ocho dígitos y una letra al final):
|
|
|
|
-Ocho dígitos seguidos de una letra (mayúscula o minúscula).
|
|
|
|
pattern="\d{8}[A-Za-z]"
|
|
|
|
|
|
5.Matrícula española (4 dígitos y 3 letras):
|
|
|
|
-Cuatro dígitos seguidos de tres letras (mayúsculas).
|
|
|
|
pattern="\d{4}[A-Za-z]{3}"
|
|
|
|
6.Teléfono español (9 dígitos):
|
|
|
|
-Nueve dígitos consecutivos.
|
|
|
|
pattern="[0-9]{9}"
|
|
|
|
7.Una dirección de email
|
|
|
|
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
|
|
|
|
8.Un código postal
|
|
|
|
pattern="[0-9]{5}"
|
|
|
|
9.Número entero
|
|
|
|
pattern="[0-9]+" (solo positivos)
|
|
|
|
pattern="-?[0-9]+" (se permiten tambien negativos)
|
|
|
|
10. Número real
|
|
|
|
pattern="-?[0-9]+(\.[0-9]+)?"
|
|
|
|
|
|
11. Contraseña fuerte (Minúscula, mayúscula, número y caracter especial)(minimo 8 caracteres)
|
|
|
|
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-])[A-Za-z\d!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]{8,}$"
|
|
|
|
12. Un color hexadecimal
|
|
|
|
pattern="#[0-9A-Fa-f]{6}" |