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: cristiannd en 03 de Mayo 2020, 15:42
-
Dejo la solución del ejercicio CU01142E del curso básico de JavaScript con ejercicios resueltos.
Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validar que no recibe parámetros.
La función validar debe realizar estas tareas y comprobaciones:
a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.
b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.
c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito PACO@GMAIL.COM debe enviarse paco@gmail.com
d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse paco@gmail.com
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio CU01142E</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
margin: 15px;
padding: 5px;
background-color: lightcoral;
width: 250px;
}
input {
width: 240px;
}
#submit {
margin-left: 15px;
}
</style>
<script>
function validar(){
var nombreIntroducido = document.getElementById('nombre').value;
var correoIntroducido = document.getElementById('correoElectronico').value;
if (nombreIntroducido.length <= 3){
alert('El nombre es demasiado corto. Debe tener más de 3 letras')
return false;
} if (correoIntroducido.indexOf('@') == -1){
document.getElementById('correoElectronico').value = correoIntroducido.replace(/at/g, '@');
alert('Falta el símbolo @ en el correo electrónico');
return false;
} else {
document.getElementById('correoElectronico').value = correoIntroducido.toLowerCase();
return true;
};
}
</script>
</head>
<body>
<form action="action.html" method="GET" onsubmit="return validar()">
<h2>Complete los datos</h2>
<div>Nombre: <br><input type="text" id="nombre" name="nombre"></div>
<div>Apellido: <br><input type="text" id="apellido" name="apellido"></div>
<div>Correo electrónico: <br><input type="text" id="correoElectronico" name="correoElectronico"></div>
<!-- <input type="submit" id="submit"> -->
<button type="submit" id="submit">Enviar</button>
</form>
</body>
</html>
-
Buenas, algunas observaciones para este ejercicio:
- En el enunciado se pedía que se comprobara si el nombre tiene al menos 3 letras y que si no es así aparezca un mensaje al intentar el envío. Sin embargo, el código tiene la condición if (nombreIntroducido.length <= 3) que supone que si tiene 3 letras aparece el mensaje "El nombre es demasiado corto. Debe tener más de 3 letras". Esto no es exactamente lo que pedía el enunciado. Hay que tener cuidado con las condiciones ya que un <= no es lo mismo que un <.
- En el enunciado se pedía que se comprobara que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto) pero el código propuesto no hace la comprobación de que exista el punto.
Puede verse una solución correcta a este ejercicio en https://aprenderaprogramar.com/foros/index.php?topic=6340.0
Salu2