E UnidadI

EVALUACIN TECNOLOGA DE PROGRAMACIN
1.-Disear una pgina web que contenga un formulario en el cual sus campos deben ser validados
utilizando JavaScript(texto, nmeros, fecha, correos, opciones, etc.)
2.-En la misma pgina web se debe dar muestra del uso de funciones y principales eventos.
3.-Crear e insertar a su documento applets con y sin parmetros. Adems puede descargar y
utilizar alguno de internet que considere adecuado a su presentacin.
<!DOCTYPE html PUBLIC

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo validación de campos</title>
<style type="text/css">
<!-#form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
.campo {
font-size: 12px;
color: #666;
margin-bottom: 10px;
width: 270px;
border: 2px solid #CCC;
}
.bt {
font-size: 12px;
color: #666;
}
-->
</style>
<script type="text/javascript">
//Nombramos la funcin
function valida_envia(){
//Definimos los caracteres permitidos en una direccin de correo electrnico
var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;
<!VALIDACION -->
//Validamos un campo o rea de texto, por ejemplo el campo nombre
if (document.form.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.form.nombre.focus()
return 0;
}
//Validamos un campo o rea de texto, por ejemplo el campo apellidos
if (document.form.apellidos.value.length==0){
alert("Tiene que escribir sus apellidos")
document.form.apellidos.focus()
return 0;
}
//Validamos un campo o rea de texto, por ejemplo el campo direccin

if (document.form.direccion.value.length==0){
alert("Tiene que escribir su direccin")
document.form.direccion.focus()
return 0;
}
//Validamos un campo o rea de texto, por ejemplo el campo localidad
if (document.form.localidad.value.length==0){
alert("Tiene que escribir su localidad")
document.form.localidad.focus()
return 0;
}
//Validamos un campo de lista/men, por ejemplo el campo provincia
if (document.form.provincia.selectedIndex==0){
alert("Tiene que seleccionar su provincia")
document.form.provincia.focus()
return 0;
}
//Validamos un campo de texto como numrico, por ejemplo el campo cdigo postal de 5 dgitos
valor = document.form.cp.value;
if( !(/^\d{5}$/.test(valor)) ) {
alert("Tiene que escribir su cdigo postal (5 dgitos)");
document.form.cp.focus();
return 0;
}
//Validamos un campo de texto como numrico, por ejemplo el campo telfono de 9 dgitos
valor = document.form.telefono.value;
if( !(/^\d{9}$/.test(valor)) ) {
alert("Tiene que escribir un telfono de 9 dgitos");
document.form.telefono.focus();
return 0;
}
//Validamos un campo de texto como email
if ((regexp.test(document.form.email.value) == 0) || (document.form.email.value.length = 0)){
alert("Introduzca una direccin de email vlida");
document.form.email.focus();
return 0;
} else {
var c_email=true;
}
//Validamos un campo de tipo checkbox, por ejemplo condiciones
if (document.form.condiciones.checked==0){
alert("Debe aceptar las condiciones")
document.form.condiciones.focus()
return 0;
}
//Si todos los campos han validado correctamente, se enva el formulario
document.form.submit();
}
//Cerramos el Script
</script>
</head>
<body>
<form id="form" name="form" method="POST" action="">
<table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="504"><table width="560" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="270" align="left" valign="top">
<label>*Nombre:<br />
<input name="nombre" type="text" class="campo" id="nombre" />
</label>
</td>
<td width="20" align="left" valign="top"> </td>
<label>*Apellidos:<br />
<input name="apellidos" type="text" class="campo" id="apellidos" />
</label>
</td>
</tr>
<tr>
<label>*Dirección:<br />
<input name="direccion" type="text" class="campo" id="direccion" />
</label>
</td>
<label>*Localidad:<br />
<input name="localidad" type="text" class="campo" id="localidad" />
</label>
</td>
</tr>
<tr>
<label for="provincia">*Provincia:</label>
<select name="provincia" class="campo" id="provincia">
<option value="0" selected="selected">Seleccione ...</option>
<option value="A CORUA">A CORUA</option>
<option value="ALAVA">ALAVA</option>
<option value="ALBACETE">ALBACETE</option>
<option value="ALICANTE">ALICANTE</option>
<option value="ALMERIA">ALMERIA</option>
<option value="ASTURIAS">ASTURIAS</option>
<option value="AVILA">AVILA</option>
<option value="BADAJOZ">BADAJOZ</option>
<option value="BARCELONA">BARCELONA</option>
<option value="BURGOS">BURGOS</option>
<option value="CACERES">CACERES</option>
<option value="CADIZ">CADIZ</option>
<option value="CANTABRIA">CANTABRIA</option>
<option value="CASTELLON DE LA PLANA">CASTELLON DE LA PLANA</option>
<option value="CEUTA">CEUTA</option>
<option value="CIUDAD REAL">CIUDAD REAL</option>
<option value="CRDOBA">CRDOBA</option>
<option value="CUENCA">CUENCA</option>
<option value="DONOSTIA">DONOSTIA</option>
<option value="GIRONA">GIRONA</option>
<option value="GRANADA">GRANADA</option>
<option value="GUADALAJARA">GUADALAJARA</option>
<option value="GUIPUZCOA">GUIPUZCOA</option>
<option value="HUELVA">HUELVA</option>
<option value="HUESCA">HUESCA</option>
<option value="ILLES BALEARS">ILLES BALEARS</option>
<option value="JAEN">JAEN</option>
<option value="LA RIOJA">LA RIOJA</option>
<option value="LAS PALMAS">LAS PALMAS</option>
<option value="LEON">LEON</option>
<option value="LLEIDA">LLEIDA</option>
<option value="LUGO">LUGO</option>
<option value="MADRID">MADRID</option>
<option value="MALAGA">MALAGA</option>
<option value="MARBELLA">MARBELLA</option>
<option value="MELILLA">MELILLA</option>
<option value="MURCIA">MURCIA</option>
<option value="NAVARRA">NAVARRA</option>
<option value="OURENSE">OURENSE</option>
<option value="PALENCIA">PALENCIA</option>
<option value="PONTEVEDRA">PONTEVEDRA</option>
<option value="SALAMANCA">SALAMANCA</option>
<option value="SANTA CRUZ DE TENERIFE">SANTA CRUZ DE TENERIFE</option>
<option value="SEGOVIA">SEGOVIA</option>
<option value="SEVILLA">SEVILLA</option>
<option value="SORIA">SORIA</option>
<option value="TARRAGONA">TARRAGONA</option>
<option value="TERUEL">TERUEL</option>
<option value="TOLEDO">TOLEDO</option>
<option value="VALENCIA">VALENCIA</option>
<option value="VALLADOLID">VALLADOLID</option>
<option value="VIZCAYA">VIZCAYA</option>
<option value="ZAMORA">ZAMORA</option>
<option value="ZARAGOZA">ZARAGOZA</option>
</select>
</td>
<label>*CP:<br />
<input name="cp" type="text" class="campo" id="cp" />
</label>
</td>
</tr>
<tr>
<label>*Teléfono:<br />
<input name="telefono" type="text" class="campo" id="telefono" />
</label>
</td>
<label>*Email:<br />
<input name="email" type="text" class="campo" id="email" />
</label>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="504"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<input name="condiciones" type="checkbox" id="condiciones" />
He leído y acepto las Condiciones Generales
</td>
<td align="right" valign="top"><input name="Botón" type="button" onclick="valida_envia()"
class="bt" id="Enviar" value="Enviar" / />
<br /></td>
</tr>
</table></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<br>
<br/>
<br>
<br/>

<table width="705" border="0" align="center" cellpadding="0" cellspacing="0">>
<tr>
<th width="235" scope="col"><applet code="Dragon.class" width="32" height="32" alt="DRAGON">
</applet></th>
<th width="235" scope="col"><object width="235" height="32">
</object>
<applet code="TDMessage.class" width="235" height="32" alt="MENSAJE">
</applet></th>
<th width="235" scope="col"><applet code="GrimaceClockApp.class" width="32" height="32"
alt="RELOJ">
</applet></th>
</tr>
</table>
</body>
</html>
Ing. Ricardo More Reao

E UnidadI

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E UnidadI

Uploaded by

Copyright:

Available Formats

EVALUACIN TECNOLOGA DE PROGRAMACIN

<!DOCTYPE html PUBLIC

//Validamos un campo o rea de texto, por ejemplo el campo direccin

Ing. Ricardo More Reao

You might also like