Para que un sistema programado en cualquier lenguaje sea efectivo tiene que contar con una serie de validaciones que procuren que este sea lo mas coherente y permita al usuario inexperto evitar colapsos en dicho sistema. Como parte de este pequeño tutorial explicaremos los más comunes.
No permitir campos vacios.
Para ello utilizaremos una script que nos permita verificar este condicion cuando utilicemos el evento onclick.
function vacios( )
{
if((document.getElementById('usuario').value=="")||(document.getElementById('password').value=="")
alert("No deje campos vacios")
return false
}
else
{
return true
}
}
La explicacion es simple, para realizar esta funcion se utiliza un método muy importante en JavaScript llamado getElementById que nos permite manipular las propiedades de un objeto, para ello si utilizamos un textbox llamado usuario este debe de tener una sintaxis parecida:
< type="text" name= "user" id="usuario" maxlengh="20">
*recordemos que es input type = "text"
Donde id= usuario nos permite manipular ese control, lo demas es asi:
Ahora en un form ponemos que al enviar el submit lleve a cabo la funcion vacios. Asi cuando el usuario presione el boton que en este caso es llevar datos ala pagina "accion.php", cuando no se llenen los campos.
Permitir solo datos numericos
Para evitar que en una caja de texto se introduzcan letras o simbolos se puede crear un script para evitar este problema:
function soloNumeros(evento)
{
var elemento = document.getElementById("cant");
// Obtener la tecla pulsada
var eventoS = evento || window.event;
var codigoCaracter = eventoS.charCode || eventoS.keyCode;
{
return true;
}
else if(codigoCaracter > 47 && codigoCaracter < 58 )
Si tenemos una caja de texto llamada cant podemos llamar a esta funcion.
Paraa empezar se debe de obtener por medio de un evento la teca pulsada esto se hace por medio de un windows.event que captura esta para que podamos manipularla por medio de una variable llamada eventoS. Esta variable a su vez es utilizada por una variable llamada codigoCaracter que obtiene el codigo ascii de la tecla con la que trabajaremos posteriormente.
Como ya lo mencionamos en los comentarios estos codigos son utilizados en condiciones por medios de un if y que al cumplirse retornan un "true" que nos permitira continuar con nuestra escritura normal, en el caso contrario no se imprimirá la tecla.
Permitir solo letras
Para esto podemos hacer otra funcion similar ala anterior cambiando los codigos que van de la "A" a la "Z" como lo hicimos con los numeros, estos van desde el 65 al 90 en ascii.
{
return true;
}
else
{
return false;
}
}
Espero que les pueda servir en sus paginas. Mucha suerte!!
*recordemos que es input type = "text"
Donde id= usuario nos permite manipular ese control, lo demas es asi:
Si el valor del campo usuario es igual a " " (lo que representa un valor nulo) O Si el valor de cuadro de texto password es igual a " " entonces se muestra un alert( mensaje emergente) con una leyenda que indique al usuario que no deje campos vacios. Ahora en un form ponemos que al enviar el submit lleve a cabo la funcion vacios.
< name="form1" action="accion.php" method="'POST'" onsubmit="return vacios()" style="color: rgb(255, 153, 0);">Ahora en un form ponemos que al enviar el submit lleve a cabo la funcion vacios. Asi cuando el usuario presione el boton que en este caso es llevar datos ala pagina "accion.php", cuando no se llenen los campos.
Permitir solo datos numericos
Para evitar que en una caja de texto se introduzcan letras o simbolos se puede crear un script para evitar este problema:
function soloNumeros(evento)
{
var elemento = document.getElementById("cant");
// Obtener la tecla pulsada
var eventoS = evento || window.event;
var codigoCaracter = eventoS.charCode || eventoS.keyCode;
// se trabaja mediante comparaciones con ascii
if(codigoCaracter == 36 || codigoCaracter == 39) // En ascii son el "$" y la "," (coma)
{
return true;
}
if(codigoCaracter == 8 || codigoCaracter == 46)
if(codigoCaracter == 36 || codigoCaracter == 39) // En ascii son el "$" y la "," (coma)
{
return true;
}
if(codigoCaracter == 8 || codigoCaracter == 46)
// Permite utilizar el espacio (ascii 8) y el punto (ascii 46)
{
return true;
}
else if(codigoCaracter > 47 && codigoCaracter < 58 )
// los codigos 48 al 57 son los numeros del 1 al 9
{
return true;
}
else
{
return false;
{
return true;
}
else
{
return false;
}
}Si tenemos una caja de texto llamada cant podemos llamar a esta funcion.
input type="text" name="cant" id="cant" onkeypress="return soloNumeros(event)" maxlength="2"
*hay que agregar < >al principio y al final como corresponde Paraa empezar se debe de obtener por medio de un evento la teca pulsada esto se hace por medio de un windows.event que captura esta para que podamos manipularla por medio de una variable llamada eventoS. Esta variable a su vez es utilizada por una variable llamada codigoCaracter que obtiene el codigo ascii de la tecla con la que trabajaremos posteriormente.
Como ya lo mencionamos en los comentarios estos codigos son utilizados en condiciones por medios de un if y que al cumplirse retornan un "true" que nos permitira continuar con nuestra escritura normal, en el caso contrario no se imprimirá la tecla.
Permitir solo letras
Para esto podemos hacer otra funcion similar ala anterior cambiando los codigos que van de la "A" a la "Z" como lo hicimos con los numeros, estos van desde el 65 al 90 en ascii.
function soloLetras(evento)
{
var elemento = document.getElementById("nombre");
// Obtener la tecla pulsada
var eventoS = evento || window.event;
var codigoCaracter = eventoS.charCode || eventoS.keyCode;
{
var elemento = document.getElementById("nombre");
// Obtener la tecla pulsada
var eventoS = evento || window.event;
var codigoCaracter = eventoS.charCode || eventoS.keyCode;
if(codigoCaracter == 37) // permite el espacio
{
return true;
}
if(codigoCaracter > 64 && codigoCaracter < 91 )
//codigos para permitir solo letras{
return true;
}
if(codigoCaracter > 64 && codigoCaracter < 91 )
{
return true;
}
else
{
return false;
}
}
Espero que les pueda servir en sus paginas. Mucha suerte!!
No hay comentarios:
Publicar un comentario