06Sep, 2016
Define tu máscara de entrada para limitar tus errores al rellenar un formulario
Categorías / Tutoriales Etiquetas: Astuce Por Kurt Carpels
Una máscara de entrada te permite definir el tipo de entrada esperado en un campo.
Paso 1: Define tu formato o máscara de entrada.
Expresiones regulares simples:
Puedes crear muy fácilmente expresiones regulares para tu formato, utilizando los caracteres A para letras y N para números enteros.
Algunos ejemplos:
- una fecha: NN-NN-NNNN
- una placa de matrícula: AA-NNN-AA
- un número de seguridad social: N NN NN NN NNN NNN NN
Expresiones regulares complejas:
Como ayuda para crear expresiones regulares complejas, puedes consultar el sitio web Regex101.com
Algunos ejemplos:
- Código de nomenclatura interna tipo 2015J02: /^2015[A-Z]\d{2}$/
- Una secuencia de 5 cifras, todas pares: /^[02468]{5}$/
- La palabra «process», que debe aparecer forzosamente al final de la introducción: /process$/gi
- Un número con 1 decimal, obligatorio: /^[1-9][0-9]*[,.][0-9]$/
- Un número con 1 decimal, facultativo: /^[1-9][0-9]*[,.][0-9]$/
Paso 2: Configura tu máscara de entrada.
- Ve a las opciones de tu campo de entrada, en la pestaña «Función avanzada«.
- Ve a Máscara de entrada

- Para definir el formato de tu máscara de entrada, rellena la casilla «Máscara de entrada (Expresión regular)» con tu expresión regular.
- Para añadir una ayuda acerca de la máscara de entrada, rellena la casilla «Máscara de entrada (Explicación para los móviles)» con indicaciones que permitan comprender y respetar el formato de introducción deseado.
- No olvides guardar tus cambios.
En el móvil.
En móviles y tablets, este texto de ayuda se convertirá en una burbuja informativa:

La introducción de datos solamente es válida si tu formato corresponde al predefinido por la expresión regular configurada.
Si el formato introducido es incorrecto, aparecerá el texto «Expresión no válida» en rojo.

En cambio, cuando la introducción respeta el formato deseado, el campo vuelve a su color original.

No dudes en enviarnos tus comentarios sobre este artículo.
Estamos a tu disposición para responder a tus preguntas, sugerencias, comentarios, etc.
Dejar un comentario