Descargar para leer sin conexión
![Universidad Politécnica Territorial Andrés Eloy
Blanco
Programa Nacional de Formación en Informática
1. Conceptos básicos: Java Script Básico, Java Script y
HTML
Unidad I : Java Script
Objetivo de la Unidad:
Conocer la aplicación de JavaScript como lenguaje de
programación de lado del cliente
Desarrollo
Validar datos de entrada
Javascript, puede ser utilizado para validar los datos
de entrada del cliente sin necesidad de enviar información
al servidor; existen diferentes formas para validar entre
ellas el uso de expresiones regulares, que será el
utilizado en el ejemplo
Una expresión regular en javascript, es de la forma
er = /^[0-9 ]$/;
Donde er, es el nombre de la expresión regular, puede
ser cualquiera
/^ son los caracteres de apertura
[0-9 ] son los caracteres que se usaran para validar,
0-9 puede ser sustituido por cualquier otro carácter
$/ son los caracteres de cierre
Una vez se tiene declarada la expresión regular, se
puede comprar un valor de entrada con ella de la siguiente
forma
a = er.test(valor);
La función test, retorna true si el valor existe
dentro de la expresión regular, de lo contrario retorna
false
Componentes.](https://image.slidesharecdn.com/guiajsvalidacion-220106182645/85/Guiajsvalidacion-1-320.jpg)
![Universidad Politécnica Territorial Andrés Eloy
Blanco
Programa Nacional de Formación en Informática
function carga(){
//1 paso, asociar las etiquetas
//a variables
var c = document.getElementById("cedula");
var n = document.getElementById("nombre");
var co = document.getElementById("correo");
//2 paso, indicar el evento con que se desea
//validar para evitar
// que se escriban caracteres
//invalidos en este caso sera keypress
c.onkeypress = function(event){
//la palabra reservada
//event, se usa para los eventos
//de teclado y retorna el valor
//ascii de la tecla pulsada dentro de la
//etiqueta
var er = /^[0-9]*$/;
validarkeypress(er,event);
};
n.onkeypress = function(event){
//las cadenas
//u00f1u00d1u00E0-u00FC](https://image.slidesharecdn.com/guiajsvalidacion-220106182645/85/Guiajsvalidacion-3-320.jpg)
![Universidad Politécnica Territorial Andrés Eloy
Blanco
Programa Nacional de Formación en Informática
//son para la ñ y los acentos
er = /^[a-zA-Zu00f1u00d1u00E0-u00FC ]*$/;
validarkeypress(er,event);
};
co.onkeypress = function(event){
presiono = false;
er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0-
u00FC]*$/;
validarkeypress(er,event);
};
//3er paso, aca se usara
//para validar el contenido
//al soltar la tecla pulsada
//se usara la misma expresion regular
//pero con el formato exacto
c.onkeyup = function(){
var er = /^[0-9]{6,8}$/;
validarkeyup(er,this,
document.getElementById("mcedula"),
"LA CEDULA DEBE TENER ENTRE 6 Y 8 DIGITOS");
};
n.onkeyup = function(){
var er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0-u00FC
]{3,20}$/;](https://image.slidesharecdn.com/guiajsvalidacion-220106182645/85/Guiajsvalidacion-4-320.jpg)
![Universidad Politécnica Territorial Andrés Eloy
Blanco
Programa Nacional de Formación en Informática
validarkeyup(er,this,
document.getElementById("mnombre"),
"EL NOMBRE DEBE TENER ENTRE 3 Y 20 LETRAS");
};
co.onkeyup = function(){
var er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0-
u00FC]{3,20}[@][A-Za-z]{3,10}[.][A-Za-z]{2,3}$/;
validarkeyup(er,this,
document.getElementById("mcorreo"),
"NO ES UN CORREO VALIDO");
};
}
function validarkeypress(er,e){
//key obtiene el codigo ascii
//del evento recuerde que
key = e.keyCode || e.which;
//luego se transforma el codigo ascii
//en un caracter
tecla = String.fromCharCode(key);
//se procede a comparar con](https://image.slidesharecdn.com/guiajsvalidacion-220106182645/85/Guiajsvalidacion-5-320.jpg)
Más contenido relacionado
![Tema2[php]](https://cdn.slidesharecdn.com/ss_thumbnails/tema2php-151016140911-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Más de lissette_torrealba
Guiajsvalidacion
- 1. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática 1. Conceptos básicos: Java Script Básico, Java Script y HTML Unidad I : Java Script Objetivo de la Unidad: Conocer la aplicación de JavaScript como lenguaje de programación de lado del cliente Desarrollo Validar datos de entrada Javascript, puede ser utilizado para validar los datos de entrada del cliente sin necesidad de enviar información al servidor; existen diferentes formas para validar entre ellas el uso de expresiones regulares, que será el utilizado en el ejemplo Una expresión regular en javascript, es de la forma er = /^[0-9 ]$/; Donde er, es el nombre de la expresión regular, puede ser cualquiera /^ son los caracteres de apertura [0-9 ] son los caracteres que se usaran para validar, 0-9 puede ser sustituido por cualquier otro carácter $/ son los caracteres de cierre Una vez se tiene declarada la expresión regular, se puede comprar un valor de entrada con ella de la siguiente forma a = er.test(valor); La función test, retorna true si el valor existe dentro de la expresión regular, de lo contrario retorna false Componentes.
- 2. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática A continuación, se muestra un ejemplo de validación de tres campos de texto haciendo uso de expresiones regulares CODIGO HTML <html> <body> VALIDACION DE DATOS ENTRADA USANDO JAVASCRIPT <br/><br/> <label for="cedula">CEDULA</label> <input type="text" id="cedula" placeholder="solo numeros"/> <span id="mcedula"></span> <br/><br/> <label for="nombre">NOMBRE</label> <input type="text" id="nombre" placeholder="Nombre y apellido"/> <span id="mnombre"></span> <br/><br/> <label for="correo">CORREO ELECTRONICO</label> <input type="text" id="correo" placeholder="aaa@aaa.com"/> <span id="mcorreo"></span> <script type="text/javascript" src="js4.js"></script> </body> </html> CODIGO JAVASCRIPT document.onload = carga();
- 3. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática function carga(){ //1 paso, asociar las etiquetas //a variables var c = document.getElementById("cedula"); var n = document.getElementById("nombre"); var co = document.getElementById("correo"); //2 paso, indicar el evento con que se desea //validar para evitar // que se escriban caracteres //invalidos en este caso sera keypress c.onkeypress = function(event){ //la palabra reservada //event, se usa para los eventos //de teclado y retorna el valor //ascii de la tecla pulsada dentro de la //etiqueta var er = /^[0-9]*$/; validarkeypress(er,event); }; n.onkeypress = function(event){ //las cadenas //u00f1u00d1u00E0-u00FC
- 4. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática //son para la ñ y los acentos er = /^[a-zA-Zu00f1u00d1u00E0-u00FC ]*$/; validarkeypress(er,event); }; co.onkeypress = function(event){ presiono = false; er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0- u00FC]*$/; validarkeypress(er,event); }; //3er paso, aca se usara //para validar el contenido //al soltar la tecla pulsada //se usara la misma expresion regular //pero con el formato exacto c.onkeyup = function(){ var er = /^[0-9]{6,8}$/; validarkeyup(er,this, document.getElementById("mcedula"), "LA CEDULA DEBE TENER ENTRE 6 Y 8 DIGITOS"); }; n.onkeyup = function(){ var er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0-u00FC ]{3,20}$/;
- 5. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática validarkeyup(er,this, document.getElementById("mnombre"), "EL NOMBRE DEBE TENER ENTRE 3 Y 20 LETRAS"); }; co.onkeyup = function(){ var er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0- u00FC]{3,20}[@][A-Za-z]{3,10}[.][A-Za-z]{2,3}$/; validarkeyup(er,this, document.getElementById("mcorreo"), "NO ES UN CORREO VALIDO"); }; } function validarkeypress(er,e){ //key obtiene el codigo ascii //del evento recuerde que key = e.keyCode || e.which; //luego se transforma el codigo ascii //en un caracter tecla = String.fromCharCode(key); //se procede a comparar con
- 6. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática //la expresion regular usando la funcion test a = er.test(tecla); if(!a){ //si no coincide, se elimna la //pulsacion del teclado usando //prevent default e.preventDefault(); } } function validarkeyup(er,etiqueta,etiquetamensaje, mensaje){ a = er.test(etiqueta.value); if(a){ etiquetamensaje.innerText = ""; } else{ etiquetamensaje.innerText = mensaje; } } Referencia Electrónica https://uniwebsidad.com/libros/javascript/capitulo- 7/validacion
- 7. Universidad Politécnica TerritorialAndrés Eloy Blanco Programa Nacional de Formación en Informática Laboratorio Práctico