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(15p) devolverá verdadero
  • isNaN(15 12) devolverá verdadero, hay un espacio en blanco
  • isNaN(3.141592) devolverá falso
  • isNaN(“23”) devolverá falso, puede ser convertido a un valor numérico

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).

2 responses to this post.

  1. Posted by Alexis on 23/10/2013 at 204

    No se me había ocurrido utilizar esa función, solía trabajar con typeof, con expresiones regulares y con valores ASCII, pero esta me gustó más. Solo una acotación, isNaN(3.141592) devuelve falso, no verdadero como aseveras.

    Saludos

    Responder

    • Gracias Alexis por tu comentario y por la observación, tienes toda la razón, se me pasó eso, inmediatamente lo corrijo y nuevamente ¡Gracias! (Y)

      Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: