Tare A 3

UNIVERSIDAD TÉCNICA DE AMBATO
ESPECIALIZACION EN DISEÑO Y ANIMACIÓN WEB

JAVASCRIPT
____________________________________________________________
Alumna:Monica Llumitasig
:Jose Caicedo
:Cristina Ochoa
TEMA:
Programa en javascript se solicite y valide una cedula
OBJETIVOS:
 Validar campos nombre, apellido, telefono y cedula de un formulario
CODIGO FUENTE
Ejercicio 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript">
function validacion2(formulario) {
var er_nombre = /(^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+|^)$/ //letras, '.' y '-'

o vacio
var er_telefono = /(^([0-9\s\+\-]+)|^)$/
//numeros, espacios, + y - o vacio
var er_email = /(^(.+\@.+\..+)|^)$/
//direccion de correo electronico o vacio
//comprueba campo de nombre

if(!er_nombre.test(formulario.nombre.value)) {
alert('Contenido del campo NOMBRE no válido.')
return false
}
//comprueba campos de telefonos (permite campos vacios y guiones)

if( !er_telefono.test(formulario.telefono.value) ) {
alert('Contenido del campo TELEFONO no válido.')
return false
}
//comprueba campo de email

if(!er_email.test(formulario.email.value)) {
alert('Contenido del campo E-MAIL no válido.')
return false
}
alert('Los campos introducidos son CORRECTOS.')

return false //cambiar por return true para ejecutar la accion del
formulario
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
</script>
<style type="text/css">

</style>
</head>
<body>
<table border="1" align="center" cellpadding="10" bordercolor="#666666">

<tr bgcolor="#CCCCCC">
<td width="260"><p align="center" class="style2">VALIDACIONES</p>
<form name="FormValidacion2" id="FormValidacion2" onsubmit="return
validacion2(this)">
<span class="style1">Nombre:</span><br />
<input type="text" name="nombre" size="14" />
<br />
<br />
<small class="style1">Teléfono:</small><br />
<input type="text" name="telefono" size="14" />
<br />
<span class="style1"><br />
E-mail:</span><br />
<input type="text" name="email" size="14" />
<br />
<br />
<input type="submit" value="Validar" name="boton_envio" />
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
<input type="reset" value="Borrar" name="boton_borrar" />

</form> </td>
</tr>
</table>
<p> </p>
</body>
</html>
Ejercicio2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Validaciones</title>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"></head>
<body>
<div align="center">
<script language=javascript>
function validarFormulario(){
var isNotOk;
//validación nombre
var nombre = window.document.formValidar.nombre.value;

if (nombre==""){
document.getElementById("name").style.display="inline";
//window.document.formValidar.nombre.focus();
//return 0;
isNotOk=true;
}
else{
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
document.getElementById("name").style.display="none";
//validación apellido
var apellido = window.document.formValidar.apellido.value;

if (apellido==""){
document.getElementById("lastName").style.display="inline";
//window.document.formValidar.apellido.focus();
//return 0;
isNotOk=true;
}
else{
document.getElementById("lastName").style.display="none";
}
//validación calle
var calle = window.document.formValidar.calle.value;

if (calle==""){
document.getElementById("street").style.display="inline";
//window.document.formValidar.calle.focus();
//return 0;
isNotOk=true;
}
else{
document.getElementById("street").style.display="none";
}
//validación nro de calle

var numero;
numero= window.document.formValidar.numero.value;
if (isNaN(numero) || (numero=="")){
document.getElementById("number").style.display="inline";
//window.document.formValidar.numero.focus();
//return 0;
isNotOk=true;
}
else{
document.getElementById("number").style.display="none";
}
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
if (isNotOk){
return 0;
}
else{
window.document.formValidar.submit();
}
}
</script>
<br>
<table width="50%" border="1" cellpadding="5" cellspacing="0"
bordercolor="#999999">
<tr>
<td><div align="center" class="style9"><span class="style8"><br>
VALIDACIONES</span><br>
</div>
<form name="formValidar" >
<table align="center" bgcolor="#CCCCCC">
<tr>
<td width="58"><span class="style10"><br>
Nombre:</span></td>
<td width="144"><br>
<input type=text name="nombre" maxlength=20></td><td
width="31"><div id="name" style="display:none; color:red"> Nombre
inválido</div>
<br></td>
</tr>
<tr>
<td><span class="style10">Apellido:</span></td>
<td><input type=text name="apellido" maxlength=20></td>
<td><div id="lastName" style="display:none;
color:red"> Apellido inválido</div></td>
</tr>
<tr>
<td><span class="style10">Calle:</span></td>
<td><input type=text name="calle" maxlength=20></td>
<td><div id="street" style="display:none;
color:red"> Calle inválida</div></td>
</tr>
<tr>
<td><span class="style10">Número:</span></td>
<td><input type=text name="numero" maxlength=5 ></td>
<td><div id="number" style="display:none;
color:red"> Número inválido</div></td>
</tr>
<tr>
<td><input name="button" type=button
onClick="validarFormulario()" value=Enviar> </tr>
</td>
</table>
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
<p> </p>
</form></td>
</tr>
</table>
<br>
</div>
</body>
</html>
EJECUCIÓN DEL PROGRAMA
Ejercicio 1
Ejercicio 2
JAVASCRIPT
____________________________________________________________
:Jose Caicedo
:Cristina Ochoa
CONCLUSIONES
• Con la aplicación se valido los campos de cadena: nombre, telefono, correo.
• Se puso en práctica el contenido de la tercera clase de javascript
RECOMENDACIONES
• Configurar adecuadamente el navegador antes de correr el script
BIBLIOGRAFÍA
• Javascript Primera Clase.Tenemaza Marisol. Colsultado el 9 de diciembre del
2009. Disponible en [http://rmtenemazajava.blogspot.com/]

Tare A 3

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tare A 3

Загружено:

Авторское право:

Доступные форматы

UNIVERSIDAD TÉCNICA DE AMBATO

ESPECIALIZACION EN DISEÑO Y ANIMACIÓN WEB

var er_nombre = /(^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+|^)$/ //letras, '.' y '-'

//comprueba campo de nombre

//comprueba campos de telefonos (permite campos vacios y guiones)

//comprueba campo de email

alert('Los campos introducidos son CORRECTOS.')

<table border="1" align="center" cellpadding="10" bordercolor="#666666">

<input type="reset" value="Borrar" name="boton_borrar" />

var nombre = window.document.formValidar.nombre.value;

var apellido = window.document.formValidar.apellido.value;

var calle = window.document.formValidar.calle.value;

//validación nro de calle

EJECUCIÓN DEL PROGRAMA

Вам также может понравиться