Autor Tema: Validar email con @ y punto JavaScript funciones de texto Ejercicio CU01142E (Leído 4415 veces)

pedro,, · « **en:** 15 de Octubre 2015, 22:52 »

Otro ejercicio mas de JavaScript.

Citar

EJERCICIO
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

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css">
			body {background-color:yellow; font-family: sans-serif;}
			label {color: maroon; display:block; padding:5px;}
		</style>
		<script type="text/javascript">
			function validar(){
				var nodoNombre = document.getElementById('nombre');
				var nodoEmail = document.getElementById('email');
				var msg = comprobarNombre(nodoNombre.value);
				if(msg!=''){alert(msg);}
				nodoEmail.value = pasarEmailAMinusculas(nodoEmail.value);
				nodoEmail.value = comprobrarAtEnEmail(nodoEmail.value);
				msg = comprobarEmail(nodoEmail.value);
				if(msg!=''){alert(msg);}				
			}
			function comprobrarAtEnEmail(email){
				return email.replace(/at/g,'@');
			}
			function pasarEmailAMinusculas(email){
				return email.toLowerCase();
			}
			function comprobarNombre(nombre){
				if(nombre.length<3){
					var msg = 'El nombre no cumple tener al menos tres letras.';
					return msg;
				}else{
					return msg='';
				}
			}
			function comprobarEmail(email){
				var msg = '';
				var hayArroba = false;
				var hayPunto = false;
				for(var i=0; i<email.length; i++){					
					if(email[i]=='@'){hayArroba = true;}
					if(email[i]=='.'){hayPunto = true;}
				}
				if(hayArroba==false && hayPunto==false){
					msg = 'Faltan el símbolo \'@\' y el \'.\'';
				}else{
					if(hayArroba==false){msg = 'Falta el símbolo \'@\' en el correo electrónico.';}
					if(hayPunto==false){msg = 'Falta el símbolo \'.\' en el correo electrónico.';}
				}
				return msg;
			}
		</script>
	</head>
	<body>
		<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="validar()">
			<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre"></label>
			<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos"></label>
			<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email"></label>
			<label><input type="submit" value="Enviar" ><input type="reset" value="Cancelar"></label>
		</form>
	</body
</html>

Saludos.

Ogramar · « **Respuesta #1 en:** 18 de Octubre 2015, 18:35 »

Hola Pedro

me he mirado el ejercicio y veo bien el código con un problema, es que si se encuentra un fallo además de mostrarse el mensaje de advertencia no se envíe el formulario pero esto se explica más adelante en el curso. Relacionado con esto está que si se muestra un mensaje de fallo al enviarse el formulario desaparecen los datos que había (al haberse enviado el formulario).

Como todo esto se explica más adelante en el curso y el código está bien planteado y bien estructurado en funciones ¡A seguir adelante!

Salu2

pedro,, · « **Respuesta #2 en:** 18 de Octubre 2015, 20:50 »

Gracias Ogramar.

Quise intentar resolver esa parte, pero como dices, eso se explica mas adelante, así que no quise adelantarme.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: