htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

El atributo pattern: expresiones regulares sin Javascript

El atributo pattern: expresiones regulares sin Javascript

El atributo pattern es otro de los agregados en HTML5 que tiene asombrado a más de un desarrollador. Consiste, basicamente, en expresiones regulares SIN javascript.

Si, así como lo leíste, con el atributo pattern (en español: patrón) de un input, podemos especificar una expresión regular (regex) para el valor del campo contra la que verificar. Por lo tanto este atributo nos permite implementar validaciones para cosas tan variadas como fechas, emails, códigos de productos o lo que se nos ocurra. Y es tan simple como suena: incluir una expresión regular en un atributo de HTML5:

1
2
3
4
5
6
7
<form onsubmit="alert('Fecha ingresada.');return false;">
   <input type="text" required=""
      pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"
      name="pattern_fecha" id="pattern_fecha"
      placeholder="Ingrese una fecha" />
   <input type="submit" value="Ingresar" />
</form>

Si estás familiarizado con las expresiones regulares, sabrás que este patrón: [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) acepta solo fechas en el siguiente formato: DD.MM.AAAA.

Chrome, Firefox, Opera 9.5+, Safari 5+, Internet Explorer 10 son los únicos navegadores que soportan el atributo pattern por el momento.

Al probar esto en los distintos navegadores podrás ver que al ingresar un valor que no cumple con la expresión regular que está en el atributo pattern, el navegador nos mostrará un mensaje (nativo del navegador) diciendo que el campo es inválido y no disparará el evento submit del formulario hasta que el campo sea corregido. Todo esto sin una sola línea de javascript.

Para ver una gran cantidad de ejemplos con este atributo, podés visitar el sitio HTML5 Pattern dónde hay regex ya listas para utilizar.

Comparte conocimiento:
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0
  • Bitcoin
  • Ethereum
  • Bitcoin cash
  • Tether
  • Stellar
Scan to Donate Bitcoin to 1L9sRKFJaXHQ8skQXR9b76KATmtEa9hsPn

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

Scan to Donate Ethereum to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

Scan to Donate Bitcoin cash to qqysclxkfj4wnrqepksydauq74lzud805v9zlptxa8

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

Scan to Donate Tether to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

Scan to Donate Stellar to GDIP3K46BRH3CDVGKDYWNEVHFI5LGG5MOBWU7QUCOCNOW4DJYIEMY2QC

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

6 comentarios para “El atributo pattern: expresiones regulares sin Javascript”

  1. David martinez dice:

    gracias… master muy buen aporte.

  2. Jose dice:

    Un comentario sobre El atributo pattern: expresiones regulares sin Javascript y los campos de tipo date. No pre-validan la fecha de ningún modo. Es decir. Si tú tecleas 31/02/2015 se lo traga.

  3. Rolando dice:

    Cita:
    «Si estás familiarizado con las expresiones regulares, sabrás que este patrón: [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) acepta solo fechas en el siguiente formato: DD.MM.AAAA.»
    La expresion regular solo acepta el formato AAAA.MM.DD

    Jose, se puede hacer dicha validación de 31-02-2015. Te dejo una expresión que puedes añadir.

    (?:(?:(?:0[1-9]|[12][0-9])[/-]?0[1-9]|1[0-2])|30[/-]?(?:(?:0[13-9]|1[0-2]))|31[/-]?(?:(?:0[13578]|1[02])))[/-]?(?:19|20)[0-9]{2}

    La siguiente expresión acepta en el formato DD/MM/AAAA

  4. […] elementos o atributos interesantes son: el atributo pattern, los atributos data, el elemento main o los elementos details y […]

  5. Guillermo dice:

    Hola, necesitaría saber como es el ingreso de datos de acuerdo al siguiente, el campo corresponde al ingreso de un precio de un producto. pattern: pattern=»^\$\d{1,3}(,\d{3})*(\.\d+)?$»

  6. admin dice:

    Hola, gracias por escribirnos, podrías elaborar tu pregunta un poco más?
    Saludos

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)