El código completo del script es el que sigue (al final lo comentaremos un poco):
<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 variables 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(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 sia 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
