« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E  (Leído 5908 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« en: 04 de Noviembre 2015, 22:47 »
Hola,

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 validacionConExpReg que no recibe parámetros.
La función validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:

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 validacionConExpReg(){
var nodoNombre = document.getElementById('nombre');
var nodoApellidos = document.getElementById('apellidos');
var nodoEmail = document.getElementById('email');
nodoNombre.value = comprobarNombre(nodoNombre.value);
nodoEmail.value = comprobarEmail(nodoEmail.value);
nodoEmail.value = pasarEmailAMinusculas(nodoEmail.value);
var msg = 'Los datos a enviar son:\nNombre: ' + nodoNombre.value + '\nApellidos: ' + nodoApellidos.value;
msg += '\nCorreo electronico: ' + nodoEmail.value;
alert(msg);
}
function comprobrarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/
if(!expReg.test(nombre)){
alert('El nombre debe de tener al menos tres letras.');
}else{
return nombre;
}
}
function comprobarEmail(email){
var msg = '';
var expAt = /\w+\sat\s\w+/
var expArroba = /[@]/
var expPunto = /[.]/
if((!expArroba.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expPunto.test(email))){
if(!expArroba.test(email) && !expAt.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @ o el .');
}else if(!expArroba.test(email) && !expAt.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return email = "";
}else{
if(expAt.test(email)){
return comprobrarAtEnEmail(email);
}else{
return email;
}
}
}
</script>
</head>
<body>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="validacionConExpReg()">
<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>
« Última modificación: 05 de Noviembre 2015, 19:19 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #1 en: 05 de Noviembre 2015, 19:19 »
Hola Pedro! Veo que vas avanzando!

He probado tu código pero algo no va bien.

Cuando introduzco un nombre como ka y pulso enviar aparece el mensaje "El nombre debe de tener al menos tres letras" y al pulsar aceptar en el campo del nombre aparece undefined, al mismo tiempo que se muestra el aviso "Dirección de correo errónea, falta el signo @ o el .

Luego aparece: los datos a enviar son Nombre: undefined, Apellidos: Correo electrónico:

Esos "undefined" no deberían aparecer, hay que revisar por qué

Esta línea es extraña: nodoNombre.value = comprobarNombre(nodoNombre.value); no entiendo por qué para hacer la comprobación asignas como value el resultado de la función.

La función no la veo bien definida:

Código: [Seleccionar]
function comprobarNombre(nombre){
var expReg = /\w{3}/
if(!expReg.test(nombre)){
alert('El nombre debe de tener al menos tres letras.');
}else{
return nombre;
}
}
Esta función a veces devuelve algo (si entra en el else tiene un return) y a veces no devuelve nada. Una función debe o bien devolver algo, o bien no devolver nada, pero hacer las dos cosas parece mal planteado.

A revisar toca!
En línea
Responsable de departamento de producción aprenderaprogramar.com

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #2 en: 06 de Noviembre 2015, 00:40 »
Hola César.
La idea de esa linea que comentas consistía en que si el nombre no era correcto, la función devolviese que '', para que nodoNombre.value quedase en blanco. Pero ya me dí cuenta de que es un mal planteamiento, y después de revisar bien el código, finalmente he decidido cambiar el planteamiento.
Aquí dejo mi nueva propuesta:

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 validacionConExpReg(){
var nodoNombre = document.getElementById('nombre');
var nodoApellidos = document.getElementById('apellidos');
var nodoEmail = document.getElementById('email');
var nombreCorrecto = false;
var emailCorrecto = false;
var atEnEmail = false;
if(!nodoNombre.value=='' && !nodoEmail.value==''){
nombreCorrecto = comprobarNombre(nodoNombre.value);
if(!nombreCorrecto){alert('El nombre debe de tener al menos tres caracteres.');}
emailCorrecto = comprobarEmail(nodoEmail.value);
if (emailCorrecto){atEnEmail = comprobrarAtEnEmail(nodoEmail.value);}
if (atEnEmail){nodoEmail.value = cambiarAtEnEmail(nodoEmail.value);}
if(nombreCorrecto && emailCorrecto){
nodoEmail.value = pasarEmailAMinusculas(nodoEmail.value);
var msg = 'Los datos a enviar son:\nNombre: ' + nodoNombre.value + '\nApellidos: ' + nodoApellidos.value;
msg += '\nCorreo electronico: ' + nodoEmail.value;
alert(msg);
}else{
alert('Vuelva a introducir los datos.');
borrarFormulario();
}
}else{
borrarFormulario();
}
function borrarFormulario(){
nodoNombre.value = '';
nodoApellidos.value = '';
nodoEmail.value = '';
}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expAt = /\w+\sat\s\w+/
var expArroba = /[@]/
var expPunto = /[.]/
if((!expArroba.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expPunto.test(email))){
if(!expArroba.test(email) && !expAt.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @ o el .');
}else if(!expArroba.test(email) && !expAt.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="validacionConExpReg()">
<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
Saludos y gracias.
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #3 en: 06 de Noviembre 2015, 08:46 »
Hola!

Veo mejor diseño pero este código tampoco me ha funcionado, si dejo todos los campos vacíos por ejemplo no sale ningún aviso y se envía el formulario, en lugar de aparecer los avisos.

El problema parece estar en if(!nodoNombre.value=='' && !nodoEmail.value=='') eso hace que no se realice la validación y no veo necesidad de esa condición en el código  ::) ::) ::)

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #4 en: 06 de Noviembre 2015, 09:57 »
Hola.

Esa condición la coloqué para que no se hagan comprobaciones innecesarias, puesto que si una de las dos falta el formulario no debe de enviarse, si es verdad que se me olvido colocar esta linea si no se cumple la condición.

Código: [Seleccionar]
alert('El formulario no se rellenó corectamente.');

Saludos.
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #5 en: 06 de Noviembre 2015, 11:00 »
Ahora entiendo tu intención  :D aunque realmente eso no es lo que pide el enunciado del ejercicio, ya que si el campo nombre está vacío por ejemplo no se cumple que tenga al menos tres letras y por tanto debería mostrarse el mensaje correspondiente...

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #6 en: 06 de Noviembre 2015, 11:11 »
Entendido queda. ;D

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 validacionConExpReg(){
var nodoNombre = document.getElementById('nombre');
var nodoApellidos = document.getElementById('apellidos');
var nodoEmail = document.getElementById('email');
var nombreCorrecto = false;
var emailCorrecto = false;
var atEnEmail = false;
nombreCorrecto = comprobarNombre(nodoNombre.value);
if(!nombreCorrecto){alert('El nombre debe de tener al menos tres caracteres.');}
emailCorrecto = comprobarEmail(nodoEmail.value);
if (emailCorrecto){atEnEmail = comprobrarAtEnEmail(nodoEmail.value);}
if (atEnEmail){nodoEmail.value = cambiarAtEnEmail(nodoEmail.value);}
if(nombreCorrecto && emailCorrecto){
nodoEmail.value = pasarEmailAMinusculas(nodoEmail.value);
var msg = 'Los datos a enviar son:\nNombre: ' + nodoNombre.value + '\nApellidos: ' + nodoApellidos.value;
msg += '\nCorreo electronico: ' + nodoEmail.value;
alert(msg);
}else{
alert('Vuelva a introducir los datos.');
borrarFormulario();
}
function borrarFormulario(){
nodoNombre.value = '';
nodoApellidos.value = '';
nodoEmail.value = '';
}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expAt = /\w+\sat\s\w+/
var expArroba = /[@]/
var expPunto = /[.]/
if((!expArroba.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expAt.test(email)) || (!expPunto.test(email) && !expPunto.test(email))){
if(!expArroba.test(email) && !expAt.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @ o el .');
}else if(!expArroba.test(email) && !expAt.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="validacionConExpReg()">
<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>
Ahora ya si empieza hacer las comprobaciones directamente y no si se cumple antes otra condición.

Saludos.
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:JavaScript validar un formulario comprobar correo electrónico Ejercicio CU01155E
« Respuesta #7 en: 06 de Noviembre 2015, 11:42 »
Así queda ajustado a lo que se pedía, perfecto  ;)
En línea
Responsable de departamento de producción aprenderaprogramar.com
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".