Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 18 de Enero 2018, 19:26
-
Hola. Dejo la entrega del ejercicio CU01155E del manual de programación pdf JavaScript desde cero.
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
/* ************************************************************************ */
/* ******************* EJERCICIO *********************** */
/* ************************************************************************ */
function validacionConExpReg()
{
msg="";
var idNombre=document.getElementById("nombre")
var idApellidos=document.getElementById("apellidos")
var idEmail=document.getElementById("email")
// a) Validar Nombre
var regExp=/\w{3}/
nomTrue=regExp.test(idNombre.value);
if (!nomTrue)
{
alert("El nombre no cumple tener al menos tres letras");
}
//c) Validar at = @
regExp=/\w+\sat\s\w+/;
atTrue=regExp.test(idEmail.value);
if (atTrue)
{
var atEmilio=idEmail.value;
idEmail.value=atEmilio.replace(/\sat\s/g,'@');
}
//b) Validar @ y .
regExp=/\@{1}.{1}/;
arroTrue=regExp.test(idEmail.value);
if (!arroTrue){alert('Falta el signo de la arroba @ o el punto .');};
if (arroTrue)
{
Emilio=idEmail.value;
idEmail.value=Emilio.toLowerCase();
}
/* ************************************************************************ */
/* ******************* FIN EJERCICIO *********************** */
/* ************************************************************************ */
//Vaciar datos y no enviar formulario
if (!arroTrue || !nomTrue)
{
idNombre.value="";
idApellidos.value="";
idEmail.value="";
msg="!!!!!! EL FORMULARIO NO SE ENVIARA ¡¡¡\nIntroduzca de nuevo los datos";
alert(msg);
return false;
}
else
{
//Presentar datos y enviar formulario
var msg="Los datos introducidos son:\n";
msg=msg+"Nombre :"+idNombre.value+"\n";
msg=msg+"Apellidos :"+idApellidos.value+"\n"
msg=msg+"Email :"+idEmail.value;
alert(msg);
}
}
</script>
<style type="text/css">
body{
background-color:green;
text-align:center;
}
#Contenedor {
background:yellow;
width:300px;
height:125px;
border:solid,red;
margin:12% auto;
text-align:center;
}
p{
color:black;
display:block;
margin:0px;
padding:5px;
}
</style>
</head>
<body>
<h1>Aprenderaprogamar.com</h1>
<h2>Ejercicio CU01155E</h2>
<div id="Contenedor">
<form name ="formularioContacto" class="form" method="get" onsubmit="return validacionConExpReg()">
<p><strong>Nombre : </strong><input id="nombre" type="text" name="nombre"> </p>
<p><strong>Apellidos:</strong> <input id="apellidos" type="text" name="apellidos"></p>
<p><strong>Email :</strong> <input id="email" type="text" name="email"></p>
<p><input type="submit" value="Enviar" ><input type="reset" value="Cancelar"></p>
</form>
</div>
©parasabermas@hayquestudiar.com
</body
</html>
Hasta mañana.
O no.
;)
-
Buenas, ejercicio perfectamente resuelto.
Solo voy a comentar un detalle accesorio: en el CSS de #Contenedor escribes una regla height:125px; y en mi navegador se ve mal. Normalmente el valor height no se establece, sino que dejamos que sea el propio contenido quien determine el alto requerido. No así con las anchuras, que sí se suelen establecer.
Salu2