Prefer to view the site in English? For relevant information, visit the English version of the website.
06Sep, 2016
0Comentarios
Image to indicate this is a tutorial

Define tu máscara de entrada para limitar tus errores al rellenar un formulario

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 

Ponga su formato 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:

Clic en el icono de información para ver el texto de ayuda.

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.

Expresión no válida si no se rellena correctamente el campo.

El usuario no puede enviar el formulario. Aparece un mensaje indicando que no se han completado todos los campos.

El usuario no puede enviar el formulario, mensaje de alerta

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

Cuando la entrada respeta el formato solicitado, 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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *