Etiqueta: validacion

javascript: controlar entrada de datos en caja de texto (este si que funciona en chrome, firefox y explorer)

por coudlain, posted in Javascript, Programacion

Con este código se valida lo que va tecleando el usuario en un cuadro de texto o un textarea. Puede validarse que solo escriban números, solo letras, números y letras, determinados caracteres…

Primero veremos el código (con la posibilidad de ver el ejemplo funcionando) y comentaremos el significado y funcionamiento de algunas líneas. Más adelante pondremos varias modificaciones del código original para que se adapte a lo que necesitemos en determinado momento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Validar entrada de datos</title>
<script type="text/javascript">
function validar(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; // 2
    if (tecla==8) return true; // 3
    patron =/[A-Za-z\s]/; // 4
    te = String.fromCharCode(tecla); // 5
    return patron.test(te); // 6
}
</script>
</head>

<body>
<p><input type="text" name="textfield" onkeypress="return validar(event)" /><br />
<textarea rows="5" cols="20" onkeypress="return validar(event)"></textarea></p>
</body>
</html>

Ver ejemplo

A continuación la explicación de las líneas de código que aparecen numeradas:

1- A la función se le pasa el objeto event

2- Aquí hay que distinguir si el navegador es Internet Explorer (IE) document.all u otro, porque ya os habreis dado cuenta que no todos los navegadores son iguales. Si el navegador es IE se asigna a la variable tecla el valor de e.keyCode, en caso contrario se asigna el valor de e.which. En los dos casos se obtiene el valor ASCII de la tecla pulsada.

3- En esta línea se comprueba si es la tecla pulsada es la tecla de retroceso y en ese caso la función termina (retorna). De esta forma se permite borrar caracteres.

4- Aquí se pone la expresión regular que permite validar si se admite o no la pulsación. En el ejemplo se admiten letras mayúsculas A-Z, letras minúsculas a-z y el espacio \s

5- Se pasa el valor ASCII de la variable tecla a su carácter correspondiente

6- Si el carácter coincide con el patrón, la función devuelve true, si no coincide devuelve false.

Ahora vamos a ver varias expresiones regulares para distintas validaciones. Sustituye la línea 4 por la que necesites:

patron = /\d/; // Solo acepta números
patron = /\w/; // Acepta números y letras
patron = /\D/; // No acepta números
patron =/[A-Za-zñÑ\s]/; // igual que el ejemplo, pero acepta también las letras ñ y Ñ

También se puede hacer un patrón que acepte determinados caracteres, poniendolos entre corchetes. Veamos un ejemplo para validar que solo se acepte a, j, t, 6 y 9:

patron = /[ajt69]/;

O el caso contrario, queremos aceptar cualquier caracter, menos alguno. Los que no nos sirven se ponen en el patron y se cambia un poco el código de la función que usamos para validar

patron =/[javierb]/; // 4
te = String.fromCharCode(tecla); // 5
return !patron.test(te); // 6

Fuente: http://www.telefonica.net/web2/blas-mar/validarformu.html