Consultoría informática: obras selectas » javascript http://xand.es ¿Tonterías? Todas las que quieras Tue, 18 May 2010 19:54:35 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Validar formularios con Javascript http://xand.es/validar-formularios-con-javascript_20100402 http://xand.es/validar-formularios-con-javascript_20100402#comments Fri, 02 Apr 2010 14:20:37 +0000 admin http://xand.es/?p=324 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:


var numTarjetaPattern=/^[0-9]{16}$/;

var numTarjeta=document.getElementById(“numTarjeta”);

if(!numTarjeta.match(numTarjetaPattern)){

alert(“Compruebe el número de la tarjeta.”);

return false;

}else{

return true;

}

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:

Á \uC1
á \uE1
É \uC9
é \uE9
Í \uCD
í \uED
Ñ \uD1
ñ \uF1
Ó \uD3
ó \uF3
Ú \uDA
ú \uFA
Ü \uDC
ü \uFC
¿ \uBF
¡ \uA1
€ \u80

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]+$/;$/;

]]> http://xand.es/validar-formularios-con-javascript_20100402/feed 0 Seleccionar fecha con jQuery UI Datepicker http://xand.es/seleccionar-fecha-con-jquery-ui-datepicker_20090825 http://xand.es/seleccionar-fecha-con-jquery-ui-datepicker_20090825#comments Tue, 25 Aug 2009 16:25:36 +0000 Alex http://xand.es/?p=167 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.

jQuery UI Datepicker

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:



<script type="text/javascript" src="jquery.js"></script>

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.



<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
  <script type="text/javascript" src="jquery-ui.js"></script>

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



<input type="text" id="date-start" name="date-start" />

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



<script type="text/javascript">
    $(function() {
      $("#date-start").datepicker({
        dateFormat: 'dd/mm/yy', // formato de fecha que se usa en España
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sabado'], // días de la semana
        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'], // días de la semana (versión super-corta)
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'], // días de la semana (versión corta)
        firstDay: 1, // primer día de la semana (Lunes)
        maxDate: new Date(), // fecha máxima
        minDate: '-2y',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], // meses
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], // meses
        navigationAsDateFormat: true,
        });
    });
  </script>
]]> http://xand.es/seleccionar-fecha-con-jquery-ui-datepicker_20090825/feed 5