trisquel

Aprende JavaScript con ejemplos (XVI). Validación de campos.

Antes de ver cómo se validan los campos te mostramos un ejemplo en el que intentamos validar un campo de texto en el que queremos que solamente se introduzca un número entre 5 y 10:

<!DOCTYPE html>
<html>
<body>

<p>Introduzca un número entre 5 y 10:</p>

<input id="aqui" type="text">
<button type="button" onclick="dale()">Comprueba</button>
<p id="msg"></p>

<script>
function dale() {
var msg, x;
msg = document.getElementById("msg");
msg.innerHTML = "";
x = document.getElementById("aqui").value;
try {
if(x == "") throw "Está vacío";
if(isNaN(x)) throw "No es un número";
x = Number(x);
if(x < 5) throw "No llega";
if(x > 10) throw "Se pasa";
}
catch(err) {
msg.innerHTML = "Resultado: " + err;
}
}
</script>

</body>
</html>


 

En primer lugar puedes observar que en el código tenemos un campo de texto que es el que vamos a validar con identificador (id) “aqui”.

Aparte del campo que vamos a validar lo que hemos hecho es crear un botón que al presionarlo ejecute la función dale() que es la encargada de validar el campo anterior.

Para la validación lo que hemos hecho es utilizar las sentencias try y catch de tal manera que si el campo de texto contiene algún valor incorrecto lo que hará el código es lanzar una excepción recogida con el catch. El catch se encargará de mostrar el texto lanzado en la excepción.

Ejercicio 16.1
Copia y ejecuta el código anterior. Verifica que funciona.
Ejercicio 16.2
Investiga si en vez de validar con JavaScript puedes hacer lo anterior solamente con HTML.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>