septiembre 07, 2011

Validando Número-Cadena Con JavaScript

Durante la clase de ayer (semana 5) en el curso de Programación Web, tratamos el tema de validación de formularios con JavaScript, de lo que existe abundante información en la Web.
Durante el ejercicio abarcamos el caso para cadenas vacías (""), el número de caracteres (length), operadores numéricos (<, >, ==,<=, >=, !=), buscar un caracter (indexOf), ... pero por la prisa se me pasó validar que la edad ingresada sea un número, así que me comprometí a postear al respecto.
Primero, el formulario:
<form action="" method="post" name="form1">
Ingrese un n&uacute;mero <input name="numero" type="text" /><br />
<input name="" type="button" value="Validar" onclick="validar_num()" />
</form>

El formulario tiene solo un cuadro de texto en donde debe ingresar un dato numérico, o al menos eso es lo que pedimos, pero podría ingresar una cadena. Al dar clic en el botón (evento onclic) se llama a la función "validar_num()", esta validará si se trata de un dato que podría usarse como dato numérico, según el resultado (verdadero o falso) mostrará un mensaje:
<script language="javascript">
function validar_num(){
    num = document.form1.numero.value;
    if(isNaN(num)){
        alert("'" + num + "' No es un número");
    }else{
        alert(num + " Si es un número");
    }
}
</script>

Quien se encarga del trabajo es la función "isNaN" (is Not a Number) que debe ir dentro de un "if" u otra operación booleana, recibe un dato y verifica si no es posible usarlo como dato numérico (que no es un número) y devuelve verdadero o falso, por ejemplo:
  • isNaN(15) devolverá falso
  • isNaN(15f) devolverá verdadero
  • isNaN(15 12) devolverá falso, hay un espacio en blanco
  • isNaN(3.141592) devolverá verdadero
En realidad, la validación podría ir así:
<script language="javascript">
function validar_num(){
    num = document.form1.numero.value;
    if(isNaN(num)){
        alert("El dato ingresado debe ser un número");
        document.form1.numero.value = "";
    }else{
        document.form1.submit();
    }
}
</script>
Si no es un número, además del mensaje (alert) borramos el dato ingresado en el formulario para que ingrese otro. Cuando se estandarice HTML 5, esto será aún más fácil.
Una advertencia: si el cuadro de texto queda vacío y el usuario envía, se mostrará como si fuera un número (con valor cero), para evitar esto podemos compara con cadena vacía ("") o contar los caracteres enviados (length).

No hay comentarios.:

Publicar un comentario

Tu comentario