La Página de DriverOp

Repositorio de códigos JavaScript.

A lo largo de mi tarea como programador de páginas/aplicaciones webs hay cosas que son más o menos repetitivas y que en su momento les encontré una solución. En esta página expongo alguno de esas cosas que uso casi siempre a la hora de programar en JavaScript (formalmente ECMAScript) porque si son útiles para mi entonces podría serlo para alguien más.

Contenido.

1. Introducción.

Lo admito, JavaScript es un lenguaje que aprendí a la fuerza y todavía sigue sin gustarme. No es el primer lenguaje que aprendí a la fuerza pero en otros casos lo acepté voluntariamente más por conveniencia que por otra cosa. Por ejemplo PHP es otro lenguaje que no me gusta y aprendí a la fuerza pero invertí mi tiempo porque las alternativas (ASP y JSP) eran peores que PHP. Si quieres saber por qué, me preguntas. Sin embargo para JavaScript no existen alternativas si quieres tener cierta sofisticación en sitios webs pues es el único lenguaje que está soportado por los grandes navegadores sin recurrir a plugins ni cosas raras.

Los códigos que a continuación expongo no están organizados de ninguna manera debido a que en primera son pocos (aún) y en segunda no sabría cómo organizarlos.

2. Validar un correo electrónico.

Donde "validar" significa verificar que una cadena de caracteres tiene el formato propio de una dirección de correo electrónico y no que el email en sí exista realmente.

function ValidarCorreo(email){
   var formato = /^([\w-\.\+])+@([\w-]+\.)+([a-z]){2,4}$/;
   var comparacion = formato.test(email);
   return comparacion;
   }

El parámetro email debe ser una cadena de caracteres, la función devuelve true en caso que email sea una dirección de correo electrónico bien formada o false en caso contrario. Los espacios en blanco por delante y/o por detrás de la cadena invalidan la cadena. Permite que el nombre de usuario (lo que está a la izquerda del "@") contenga uno o más puntos y/o uno o más símbolos suma ("+"), este último es apropiado para las direcciones "virtuales" de Google Mail (GMail). Mientras que el dominio (lo que está a la derecha del "@") no puede comenzar con punto y puede contener tantos subdominios como se quiera siempre que el último, es decir, el dominio de mayor nivel o TLD (Top Level Domain) tenga 2 o 3 o 4 caracteres nada más. En ningún caso acepta caracteres especiales (incluyendo vocales acentuadas).

Nota especial: este código podría volverse obsoleto cuando se implemente el estandar HTML5 ya que en ese estandar habrá un <input> tipo "email" y sería el propio navegador quien haga la comprobación.

3. Validación trivial del formato de una fecha.

Aquí lo que se pretende no es determinar si la fecha ingresada es válida sino que el formato tipo fecha es correcto.

Antes hay que establecer qué se considera como formato correcto, en este caso será cualquier cadena de caracteres que comience con uno o dos dígitos seguidos por una barra "/" o un guión "-", al cual le siguen uno o dos dígitos seguidos por una barra "/" o un guión "-", al cual le siguen cuatro dígitos y nada más. Esto es compatible con el formato "dd/mm/aaaa" o "dd-mm-aaaa" (donde "dd" es el día, "mm" el mes y "aaaa" es el año). Los lugares para "dd" en caso de tener dos dígitos, el primero solo puede ser 0,1,2 o 3. Los lugares para "mm" en caso de tener dos dígitos, el primero solo puede ser 0 o 1.

function ValidarFecha(fecha) {
   var formato = /^[0-3]?[0-9](-|\/)[0-1]?[0-9](-|\/)[0-9]{4}$/;
   var comparacion = formato.test(fecha);
   return comparacion;
   }

El parámetro fecha es la cadena de caracteres a validar, la función devuelve true en caso que fecha tenga el formato correcto, false en caso contrario. Como se ha dicho esta función valida el formato y no la fecha en sí.

Por ejemplo:

30/12/2009 -> true (y fecha válida).
3/13/2209 -> true (y fecha no válida).
4/12/2009 -> true (y fecha válida).
40/12/2009 -> false (y fecha no válida).
09/02/2009 -> true (y fecha válida).
9/2/2009 -> true (y fecha válida).
9/2/09 -> false (y fecha válida si consideramos el año 9 de la EC).
09/42/2009 -> false (y fecha inválida).
33/15/2009 -> true (y fecha inválida).

Ahora bien, si no se valida la fecha en sí ¿por qué usar esta función?, pues porque evita llamar a una función más complicada para validar la fecha cuando se puede prevenir eso simplemente mirando el formato de la fecha.

Nota: para permitir el ingreso del año en dos o cuatro cifras cambiar {4} en la expresión regular por {2,4} aunque esto dará como buena una fecha con tres dígitos en el año también.

4. Quitar espacios por delante y por detrás de una cadena (función "trim()").

Lamentablemente JavaScript no tiene la función trim() que sí tienen otros lenguajes tal como PHP o Delphi. Esta función sirve para quitar los espacios y caracteres no imprimibles por delante y por detrás de una cadena, de forma tal que una cadena como:

" esto es una cadena   "

Quedaría como:

"esto es una cadena"

Para solventar esto y siguendo la convención de prototipos de JavaScript, agrega esto bien al inicio de tu script:

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, "");    };

Lo que se hace aquí es agregar un método nuevo a la clase String llamado trim. Todas las cadenas de caracteres en JavaScript son en realidad un objeto de tipo string, por lo tanto, para usar este método hay que invocarlo como se hace con cualquier método de clase:

var cadena = " esto es una cadena ";
var cadenatruncada = cadena.trim();
alert(cadenatruncada);

También se puede usar directamente como:

var cadena = " esto es una cadena ";
alert(cadena.trim());

Otra ventaja de agregar trim() como método de clase es que puede heredar otros métodos de la clase padre, así también se pueden invocar otros métodos a partir de este método, por ejemplo length:

var cadena = " esto es una cadena ";
alert(cadena.length); // largo de la cadena sin truncar
alert(cadena.trim().length); // largo de la cadena truncada

5. Probar o validar que una cadena de caracteres (string) es un número entero.

En algún momento se necesitará saber si el usuario ha escrito un número entero como pedido de entrada en un campo de texto tipo input. JavaScript tiene un método llamado parseInt(cadena); pero sufre de algunas complicaciones. Por ejemplo, "cadena" puede contener caracteres no numéricos y la función devolverá un valor entero siempre y cuando el o los primeros caracteres de esa cadena sean números. En ese caso la cadena "20 años" devolverá el valor 20 y esto no siempre es deseable si se pretende que el usuario solo y únicamente ingrese un número y nada más.

Otra característica (comprensible pero inaceptable para mí) es que parseInt(); asume cosas que van contra la intuición del programador. Si el usuario ha escrito un número precedido por el caracter cero (tal como "09") parseInt() asume que el número especificado está en base 8 (octal), esto puede llevar a situaciones frustrantes tal como que la cadena "08" devuelva "NAN" (Not a number) simplemente porque en base octal el símbolo "8" (y el "9") no existen. Para subsanar esto parseInt(); admite un segundo parámetro que le indica en qué base debe interpretar el número, de forma tal que parseInt("08",10); devolverá el valor correcto porque el segundo parámetro indica que debe interpresarse la cadena como un número en base 10 (decimal, el que usamos normalmente).

Es por esto que se propone a continuación un método prototipado de String para probar o validar que una cadena es un número entero, negativo o positivo y solamente un número. Notar que se hace uso de trim(), explicado en el apartado 4. de este documento.

Al principio del script poner:

String.prototype.isint = function() {
	var regint = /^[\+|\-]*\d+$/;
	return regint.test(this.trim());
};

El método isint() devuelve true o false dependiendo de si la cadena String es un número entero o no, y se usa de la siguiente forma:

var valor = document.getElementById("numero").value; // Se asume que "numero" es un elemento <input type="text"> o similar.
if (valor.isint()) {
	alert("Es un número entero");
} else {
	alert("No es un número entero");
}

6. Probar o validar que una cadena de caracteres (String) es un número real o flotante.

En línea con lo anterior, a veces es necesario validar que lo ingresado por el usuario es un número real (es decir con decimales). Para esto caso parseInt(); no nos sirve y JavaScript tiene un método llamado parseFloat(); para este propósito. Sin embargo le caben las mismas consideraciones que para parseInt(); explicado en el apartado anterior.

La dificultad añadida en este caso es que JavaScript, para representar un número real (flotante) usa la notación anglosajona, es decir usa el punto (.) y no la coma (,) como separador de decimales. Para los hispanohablantes esto es antitintuitivo y lleva a errores.

Por lo tanto, para hacer una evaluación correcta se propone además un método para intercambiar la coma por el punto antes de validar que una cadena es un número real (flotante) válido.

6.1. Cambiar la coma por el punto como separador de decimales.

Al principio del script poner:

String.prototype.replaceComma = function() { return this.replace(/,/g, "."); };

Lo que hace este método es reemplazar la coma por el punto en cualquier lugar de la cadena y devolver el resultado.

Entonces a continuación poner:

String.prototype.isfloat = function() {
	var regfloat = /^[\+|\-]*\d+[\.\d+]*$/;
	return regfloat.test(this.trim().replaceComma());
};

Notar que se hace uso de trim() aquí también.

Y todo esto se usa de la siguiente manera:

var valor = document.getElementById("numero").value; // Se asume que "numero" es un elemento <input type="text"> o similar.
if (valor.isfloat()) {
	alert("Es un número real");
} else {
	alert("No es un número real");
}

El método isfloat() acepta como válidos cadenas que pueden no tener una parte decimal fraccionaria y estar precedidas o no por el signo. Entoces las siguientes cadenas darán resultado verdadero: "20", "20.0", "20,0", "20,1" o "-20,10".

Por Diego Romero,