Guiajsvalidacion

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.

Blanco
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();

Blanco
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

Blanco
//son para la ñ y los acentos
er = /^[a-zA-Zu00f1u00d1u00E0-u00FC ]*$/;
};
co.onkeypress = function(event){
presiono = false;
er = /^[a-zA-Z0-9.-_u00f1u00d1u00E0-
u00FC]*$/;
};
//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}$/;

Blanco
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}$/;
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

Blanco
//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

Blanco
Laboratorio Práctico

Guiajsvalidacion

Más contenido relacionado

La actualidad más candente (20)

Similar a Guiajsvalidacion (20)

Más de lissette_torrealba (20)

Último (20)

Guiajsvalidacion