| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios
Validador de fecha en caja de texto
por Luciano Moreno, del departamento de diseño web de BJS Software.
Han sido ya varias las personas que me han pedido alguna función que permita validar una fecha introducida por el usuario en una caja de texto. Cada vez he creado una función parecida y se la he enviado al peticionario, pero cuando mi estimado amigo Cristian me la pidió esta semana decidí ponerla al alcance de todos, pues tanta era su necesidad por parte de los autores web.
En realidad es una función sencilla, pero creo que muy instructiva, ya que maneja diferentes métodos propios de JavaScript que normalmente se utilizan poco, a pesar de ser muy útiles.
El código completo del script es el que sigue (al final lo comentaremos un poco):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0 Transitional//EN">
<html>
<head>
<title>HTMLWeb. WebScript. Formularios. Validador de fechas en caja de
texto</title>
<script language="JavaScript"
type="text/javascript">
/**
* script para validar
fechas en una caja de texto.
*@Autor
Luciano Moreno WebMaster de HTMLWeb http://www,htmlweb.net
*/
/**
* definimos las varables
globales que van a contener la fecha completa, cada una de sus
partes
* y los dias correspondientes al mes de febrero
segun sea el año bisiesto o no
*/
var a, mes, dia, anyo, febrero;
/**
* funcion para comprobar si una año es
bisiesto
* argumento anyo > año extraido de la fecha
introducida por el usuario
*/
function anyoBisiesto(anyo)
{
/**
* si el año introducido es de
dos cifras lo pasamos al periodo de 1900. Ejemplo: 25 >
1925
*/
if (anyo <
100)
var
fin = anyo + 1900;
else
var
fin = anyo ;
/*
* primera condicion: si el
resto de dividir el año entre 4 no es cero > el año no es
bisiesto
* es decir, obtenemos año
modulo 4, teniendo que cumplirse anyo mod(4)=0 para
bisiesto
*/
if (fin % 4 !=
0)
return
false;
else
{
if (fin
% 100 ==
0)
{
/**
* si el año es divisible por 4 y por 100 y divisible por 400 > es
bisiesto
*/
if (fin % 400 ==
0)
{
return
true;
}
/**
* si es divisible por 4 y por 100 pero no lo es por 400 > no es
bisiesto
*/
else
{
return
false;
}
}
/**
* si
es divisible por 4 y no es divisible por 100 > el año es
bisiesto
*/
else
{
return
true;
}
}
}
/**
*
funcion principal de validacion de la fecha
* argumento
fecha > cadena de texto de la fecha introducida por el
usuario
*/
function validar(
)
{
/**
* obtenemos la fecha introducida y
la separamos en dia, mes y año
*/
a=document.forms[0].fecha.value;
dia=a.split("/")[0];
mes=a.split("/")[1];
anyo=a.split("/")[2];
if( (isNaN(dia)==true) ||
(isNaN(mes)==true) || (isNaN(anyo)==true) )
{
alert("LA fecha introducida debe
estar formada sólo por números");
return;
}
if(anyoBisiesto(anyo))
febrero=29;
else
febrero=28;
/**
* si el mes introducido es negativo,
0 o mayor que 12 > alertamos y detenemos
ejecucion
*/
if ((mes<1) ||
(mes>12))
{
alert("El mes
introducido no es valido. Por favor, introduzca un mes
correcto");
document.forms[0].fecha.focus();
document.forms[0].fecha.select();
return;
}
/**
* si el mes introducido es febrero y
el dia es mayor que el correspondiente
* al año introducido > alertamos y detenemos
ejecucion
*/
if ((mes==2) && ((dia<1)
|| (dia>febrero)))
{
alert("El dia
introducido no es valido. Por favor, introduzca un dia
correcto");
document.forms[0].fecha.focus();
document.forms[0].fecha.select();
return;
}
/**
* si el mes introducido es de 31
dias y el dia introducido es mayor de 31 > alertamos y detenemos
ejecucion
*/
if (((mes==1) || (mes==3) || (mes==5)
|| (mes==7) || (mes==8) || (mes==10) || (mes==12)) && ((dia<1) ||
(dia>31)))
{
alert("El dia
introducido no es valido. Por favor, introduzca un dia
correcto");
document.forms[0].fecha.focus();
document.forms[0].fecha.select();
return;
}
/**
* si el mes introducido es de 30
dias y el dia introducido es mayor de 301 > alertamos y detenemos
ejecucion
*/
if (((mes==4) || (mes==6) || (mes==9)
|| (mes==11)) && ((dia<1) ||
(dia>30)))
{
alert("El dia
introducido no es valido. Por favor, introduzca un dia
correcto");
document.forms[0].fecha.focus();
document.forms[0].fecha.select();
return;
}
/**
* si el mes año introducido es menor
que 1900 o mayor que 2010 > alertamos y detenemos
ejecucion
* NOTA: estos valores son a
eleccion vuestra, y no constituyen por si solos fecha
erronea
*/
if ((anyo<1900) ||
(anyo>2010))
{
alert("El año
introducido no es valido. Por favor, introduzca un año entre 1900 y
2010");
document.forms[0].fecha.focus();
document.forms[0].fecha.select();
}
/**
* en caso de que todo sea correcto
> enviamos los datos del formulario
*
para ello debeis descomentar la ultima
sentencia
*/
else
alert("La fecha
introducida es correcta. Gracias por su
colaboración");
//document.forms[0].submit();
}
</script>
</head>
<body
bgcolor="#ffff99">
<center>
<p
style="font-size:12px;font-family:Verdana,Helvetica;">Introduzca una fecha en
formato dd/mm/aaaa:</p>
<form>
<input type="text"
name="fecha" size="9" maxlength="10"><br><br>
<input
type="button" name="envio" value="enviar"
onClick="validar();">
</form>
</center>
</body>
</html>
Comentarios:
1. Recogemos la fecha introducida por el usuario en la variable global "a", y luego vamos sacando de ella el día, el mes y el año mediante el método split(). Este método de manejo de cadenas, implementado desde la versión 1.3 de JavaScript y desde la versión 3 de JScript, busca en una cadena las subcadenas contenidas entre las diferentes apariciones del caracter delimitador fijado.
La sintaxis general de este método es:
cadena.split("caracter")[n]
donde "caracter" es el caracter delimitador entre las subcadenas, y [n] representa el índice de aparición del caracter en la cadena, empezando desde 0.
2. Hemos creado una función específica para comprobar si un año determinado es bisiesto, en la que usamos como base el operador modulo (resto de la división entera), %, cuya sintaxis general es:
c = a % b
y que obtiene el resto de dividir el número a entre el número b.
3. Lo que sigue es fácil. Vamos comprobando los días máximos que puede tener cada mes y que el mes introducido séa válido. En caso de error damos el foco a la caja de texto (mediante el método focus()) y seleccionamos el texto introducido en ella (mediante el método select()), deteniendo la ejecución de la función mediante la sentencia return.
El resultado de este código podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Formularios