Permitir solo numeros - letras.

Daniel Muñoz · 14 Jun 2014

Hola betas, necesito aprender como hacer validaciones.

¿Pero porque no usas en navegador?
Porque necesito aprender, y saber para que funciona cada cosa.

Buscando en Googleneitor encontre muchas cosas. Por ejemplo este.

Insertar CODE, HTML o PHP:

<script type="text/javascript">
  function validarLetras(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true; // backspace
        if (tecla==32) return true; // espacio
        if (e.ctrlKey && tecla==86) { return true;} //Ctrl v
        if (e.ctrlKey && tecla==67) { return true;} //Ctrl c
        if (e.ctrlKey && tecla==88) { return true;} //Ctrl x
 
        patron = /[a-zA-Z]/; //patron
 
        te = String.fromCharCode(tecla); 
        return patron.test(te); // prueba de patron
    }    
</script>

El siguiente código sería el ejemplo de como debe quedar el control input en tu html, debemos agregar el evento "onkeydown", que dispara el evento cada vez que se presiona una tecla, y llamar a la función para validar letras.

Insertar CODE, HTML o PHP:

<input type="text" name="letras" id="letras" onkeydown="return validarLetras(event)"/>

Mi profesor de programación me paso este código.

Insertar CODE, HTML o PHP:

function validar_numeros(numero) 
    { 
             if (!/^([0-9])*$/.test(numero)) 
              alert("El campo solo debe contener numeros"); 
       }

Pero no se tomo la dedicación de explicarmelo, entonces si alguien pude ayudarme le agradeceria mucho.

Invoco los poderes celestiales de [MENTION=9679]cicklow[/MENTION] - Enlace eliminado

Cicklow · 14 Jun 2014

.test es para testear... lo que hace validar que solo sean numeros... (permite expresiones regulares)
JavaScript test() Method

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
.test es para testear... lo que hace validar que solo sean numeros... (permite expresiones regulares)
JavaScript test() Method

Me gustaría que me explicaras el primer ejemplo, donde solo se permiten ciertas teclas.

Insertar CODE, HTML o PHP:

<script type="text/javascript">
  function validarLetras(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true; // backspace
        if (tecla==32) return true; // espacio
        if (e.ctrlKey && tecla==86) { return true;} //Ctrl v
        if (e.ctrlKey && tecla==67) { return true;} //Ctrl c
        if (e.ctrlKey && tecla==88) { return true;} //Ctrl x
 
        patron = /[a-zA-Z]/; //patron
 
        te = String.fromCharCode(tecla); 
        return patron.test(te); // prueba de patron
    }    
</script>

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:

Me gustaría que me explicaras el primer ejemplo, donde solo se permiten ciertas teclas.

Insertar CODE, HTML o PHP:

<script type="text/javascript">
  function validarLetras(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true; // backspace
        if (tecla==32) return true; // espacio
        if (e.ctrlKey && tecla==86) { return true;} //Ctrl v
        if (e.ctrlKey && tecla==67) { return true;} //Ctrl c
        if (e.ctrlKey && tecla==88) { return true;} //Ctrl x
 
        patron = /[a-zA-Z]/; //patron
 
        te = String.fromCharCode(tecla); 
        return patron.test(te); // prueba de patron
    }    
</script>

lo que hace es verificar el numero de cada tecla (cada tecla tiene un numero asignado en el codigo ascii...) ejemplo el 32 es el espacio, el 13 es el enter, el 8 es la barra de brrar... etc...

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
lo que hace es verificar el numero de cada tecla (cada tecla tiene un numero asignado en el codigo ascii...) ejemplo el 32 es el espacio, el 13 es el enter, el 8 es la barra de brrar... etc...

Si justamente estaba investigando de eso.
Javascript Char Codes (Key Codes) - Cambia Research

Pero aun tengo interrogantes.

Insertar CODE, HTML o PHP:

(document.all) ? e.keyCode : e.which;

¿Para que sirve?

Insertar CODE, HTML o PHP:

patron = /[a-zA-Z]/; //patron
 
        te = String.fromCharCode(tecla); 
        return patron.test(te); // prueba de patron

Para que sirven?

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:
Si justamente estaba investigando de eso.
Javascript Char Codes (Key Codes) - Cambia Research

Pero aun tengo interrogantes.

Insertar CODE, HTML o PHP:

(document.all) ? e.keyCode : e.which;

¿Para que sirve?

Insertar CODE, HTML o PHP:

patron = /[a-zA-Z]/; //patron te = String.fromCharCode(tecla); return patron.test(te); // prueba de patron

Para que sirven?

el 1 es como si fuera un if... lo que hace es ver si el keycode existe lo coloca al document.all sino usa e.wich (es por compatibilidad de navegadores)
el 2 es lo que te explike antes... usa el test para verificar si son az AZ (solo letrax)

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
el 1 es como si fuera un if... lo que hace es ver si el keycode existe lo coloca al document.all sino usa e.wich (es por compatibilidad de navegadores)
el 2 es lo que te explike antes... usa el test para verificar si son az AZ (solo letrax)

Okay gracias brother.

Mira lo que hice.

Insertar CODE, HTML o PHP:

function numeros (e) {
  numero = ( document.all ) ? e.KeyCode : e.which;
  if ( numero >= 48 && numero <= 57 )  { return true; }
  if ( numero >= 96 && numero <= 105 ) { return true; }
  if ( numero === 8 ) { return true };
  patron = /[0-9]/;
  v = String.fromCharCode(numero);
  return patron.test(v);
  
}

Donde solo permito los numero del teclado y en numpad. Pero quiero bloquear los signos ( !"#$%&/()= ) como hago?

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:
Okay gracias brother.

Mira lo que hice.

Insertar CODE, HTML o PHP:

function numeros (e) { numero = ( document.all ) ? e.KeyCode : e.which; if ( numero >= 48 && numero <= 57 ) { return true; } if ( numero >= 96 && numero <= 105 ) { return true; } if ( numero === 8 ) { return true }; patron = /[0-9]/; v = String.fromCharCode(numero); return patron.test(v); }

Donde solo permito los numero del teclado y en numpad. Pero quiero bloquear los signos ( !"#$%&/()= ) como hago?

usas el ascii de esos... y regresas FALSE

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
usas el ascii de esos... y regresas FALSE

Ya lo intente, según su numero ASCII ( ASCII - Wikipedia, la enciclopedia libre ) colocándolo en false, pero igual permite colocar los signos.

Insertar CODE, HTML o PHP:

if ( numero >= 33 && numero <= 35 ) { return false; }

Insertar CODE, HTML o PHP:

if ( numero === 33 ) { return false; }

¿Alguna otra idea?

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:
Ya lo intente, según su numero ASCII ( ASCII - Wikipedia, la enciclopedia libre ) colocándolo en false, pero igual permite colocar los signos.

Insertar CODE, HTML o PHP:

if ( numero >= 33 && numero <= 35 ) { return false; }

Insertar CODE, HTML o PHP:

if ( numero === 33 ) { return false; }

¿Alguna otra idea?

HTML:

<input type="text" name="letras" id="letras" onkeydown="return numeros(event)"/>
<textarea id="pepito"></textarea>
<script>
function numeros (e) {
  numero = ( document.all ) ? e.KeyCode : e.which;
  document.getElementById('pepito').value = document.getElementById('pepito').value + numero + "\n";
  if (e.shiftKey){
	if(numero >= 33 && numero <= 35) { return false; }
	if(numero >= 48 && numero <= 57) { return false; }
  }
  if ( numero >= 48 && numero <= 57 )  { return true; }
  if ( numero >= 96 && numero <= 105 ) { return true; }
  if ( numero === 8 ) { return true };
  patron = /[0-9]/;
  v = String.fromCharCode(numero);
  return patron.test(v);
}
</script>

el texarea es para ver el numero de la tecla... en el teclado de mi notebook los !"#$%&/()= son con la tecla shift y tienen el mismo valor que los numeros... por eso verifico si preciono la tecla shift y si coincide con alguno de esos numero...

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
HTML:

<input type="text" name="letras" id="letras" onkeydown="return numeros(event)"/> <textarea id="pepito"></textarea> <script> function numeros (e) { numero = ( document.all ) ? e.KeyCode : e.which; document.getElementById('pepito').value = document.getElementById('pepito').value + numero + "\n"; if (e.shiftKey){ if(numero >= 33 && numero <= 35) { return false; } if(numero >= 48 && numero <= 57) { return false; } } if ( numero >= 48 && numero <= 57 ) { return true; } if ( numero >= 96 && numero <= 105 ) { return true; } if ( numero === 8 ) { return true }; patron = /[0-9]/; v = String.fromCharCode(numero); return patron.test(v); } </script>

el texarea es para ver el numero de la tecla... en el teclado de mi notebook los !"#$%&/()= son con la tecla shift y tienen el mismo valor que los numeros... por eso verifico si preciono la tecla shift y si coincide con alguno de esos numero...

En mi computador es igual, para sacar los signos !"#$%&/()= debo presionar la tecla "shift" y presionar la tecla correspondiente por ejemplo. Para el " ! " debe ser "Shift + 1"

En pocas palabras probe el codigo que colocaste, pero no lo entendi :s

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:
En mi computador es igual, para sacar los signos !"#$%&/()= debo presionar la tecla "shift" y presionar la tecla correspondiente por ejemplo. Para el " ! " debe ser "Shift + 1"

En pocas palabras probe el codigo que colocaste, pero no lo entendi :s

no es nada raro... el textarea ese sacalo al igual que

HTML:

document.getElementById('pepito').value = document.getElementById('pepito').value + numero + "\n";

Lo que te interesa a vos es esto:

HTML:

if (e.shiftKey){
    if(numero >= 33 && numero <= 35) { return false; }
    if(numero >= 48 && numero <= 57) { return false; }
  }

se verifica si la tecla shift se preciona, si es asi, verificas si se esta precionando conjuntamente con el shift algun numero para los simbolos !"#$%&/

Daniel Muñoz · 14 Jun 2014

cicklow dijo:
no es nada raro... el textarea ese sacalo al igual que

HTML:

document.getElementById('pepito').value = document.getElementById('pepito').value + numero + "\n";

Lo que te interesa a vos es esto:

HTML:

if (e.shiftKey){ if(numero >= 33 && numero <= 35) { return false; } if(numero >= 48 && numero <= 57) { return false; } }

se verifica si la tecla shift se preciona, si es asi, verificas si se esta precionando conjuntamente con el shift algun numero para los simbolos !"#$%&/

Probé agregando lo que me sugeriste pero no me funciono. La solución la encontre leyendo en internet (tenia rato investigando y viendo otros ejemplos.

Cambie el onkeydown por onkeypress y ya no permite los signos, me imagino porque el onkeypress solo permite 1 letra al mismo tiempo.

Lo que no me queda muy claro es la funcionalidad de esto, aunque ya me explicaste.

patron = /[0-9]/;
v = String.fromCharCode(numero);
return patron.test(v);

Cicklow · 14 Jun 2014

Daniel Muñoz dijo:
Probé agregando lo que me sugeriste pero no me funciono. La solución la encontre leyendo en internet (tenia rato investigando y viendo otros ejemplos.

Cambie el onkeydown por onkeypress y ya no permite los signos, me imagino porque el onkeypress solo permite 1 letra al mismo tiempo.

Lo que no me queda muy claro es la funcionalidad de esto, aunque ya me explicaste.

veamos... el codigo que te puse funciona bien... sino no te pasaba nada... pero como gustes!

cantasken · 15 Jun 2014

Te recomendaría usar jquery, que es un framework de javascript y te facilita en estos temas de validación.
bueno si deseas validar números y usas jquery seria así

valor1 = ('#nombredeldiv').val();
if($.isNumeric(valor1){
alert('es un numero')
}else{
alert('no es un numero')
}

si deseas mas explicacion sobre este framework de javascript y sus potenciales mandame mp

Permitir solo numeros - letras.

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

Daniel Muñoz

Cicklow

cantasken

Privacidad y transparencia

Privacidad y transparencia