Permitir apenas números - letras.

Daniel Muñoz · 14/06/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.

Inserir CODE, HTML ou 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.

Inserir CODE, HTML ou PHP:

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

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

Inserir CODE, HTML ou 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/06/2014

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

Daniel Muñoz · 14/06/2014

cicklow disse:
.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.

Inserir CODE, HTML ou 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/06/2014

Daniel Muñoz disse:

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

Inserir CODE, HTML ou 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/06/2014

cicklow disse:
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.

Inserir CODE, HTML ou PHP:

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

¿Para que sirve?

Inserir CODE, HTML ou PHP:

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

Para que sirven?

Cicklow · 14/06/2014

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

Pero aun tengo interrogantes.

Inserir CODE, HTML ou PHP:

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

¿Para que sirve?

Inserir CODE, HTML ou 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/06/2014

cicklow disse:
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.

Inserir CODE, HTML ou 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/06/2014

Daniel Muñoz disse:
Okay gracias brother.

Mira lo que hice.

Inserir CODE, HTML ou 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/06/2014

cicklow disse:
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.

Inserir CODE, HTML ou PHP:

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

Inserir CODE, HTML ou PHP:

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

¿Alguna otra idea?

Cicklow · 14/06/2014

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

Inserir CODE, HTML ou PHP:

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

Inserir CODE, HTML ou 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/06/2014

cicklow disse:

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/06/2014

Daniel Muñoz disse:
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/06/2014

cicklow disse:
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/06/2014

Daniel Muñoz disse:
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/06/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 apenas números - 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

Tópicos similares