Consultoría informática: obras selectas

Validar formularios con JavaScript mediante las expresiones regulares es una solución bastante elegante, fiable y requiere muy poco código en comparación con otras vías.

Por ejemplo, si necesitamos comprobar un número de la tarjeta de crédito podemos hacerlo de la siguiente forma:

Existe multitud de tutoriales sobre cómo usar expresiones regulares, por ejemplo aquí y aquí. El problema viene cuando en el campo que tenemos que comprobar aparecen caractéres que no están incluidos en la tabla ASCII. Hablando de castellano estos caractéres primeramente son las letras acentuadas y la eñe. No obstante, en JavaScript se pueden poner como códigos hexadecimales. Abajo pongo la tabla de correspondencia:

Entonces, si queremos usar estas secuencias lo único que tenemos que hacer es incluirlas en el patrón, por ejemplo:

var pattern=/^[\u00f1]{1}$/;

Sólo permitirá un sólo caracter que será la Ñ.

Para permitir todas las letras del castellano posibles, además del espacio se puede usar la siguiente sentencia:

var pattern=/^/^[A-Za-z\s\u00c1\u00e1\u00c9\u00e9\u00cd\u00ed\u00d1\u00f1\u00d3\u00f3\u00da\u00fa\u00dc\u00fc]+$/;$/;

Hoy en día hay muchas librerías que nos pueden hacer la vida mucho más sencilla cuando se trata de JavaScript. Todos conocemos bibliotecas como jQuery, Prototype y otras. En esta entrada voy a hablar sobre una extensión de la librería jQuery llamada jQuery UI.

Esta biblioteca ofrece varios componentes gráficos que podemos usar en nuestras páginas, entre ellos podemos destacar, datepicker — seleccionador de fecha (calendario), dialog — ventanas modales, progressbar — barra de progreso y muchos otros. Voy a explicar como podemos usar datepicker adaptado al entorno nuestro, es decir, a España con sus correspondientes días de la semana, nombres de meses, etc.

Antes que nada tenemos que descargar la última versión de jQuery e incluirla en nuestras páginas:

Una vez que tengamos jQuery instalado, descargamos jQueryUI desde esta página. Como podéis ver ofrecen las versiones completamente personalizadas para cada gusto. Yo aconsejaría descargar la versión de la librería completa, al menos para las pruebas.

Desempaquetamos todos, en este punto vamos a tener tres grupos de ficheros, el propio JavaScript, las imágenes y el css, en un principios las imágenes tienen que ir en el directorio /images, no he mirado las opciones para poder cambiar esto, pero estoy casi seguro que se podrá hacer de alguna forma. En cuanto al resto, lo incluímos en la cabecera de la página web.

Una vez hecho esto ya podemos instanciar el datepicker. La forma más sencilla de hacerlo es creado un input de tipo texto:

Una vez que lo tengamos definido, podemos instanciar el datepicker en el bloque head de la siguiente manera: