Autor Tema: JavaScript. Formulario función toLowerCase replace() Ejercicio resuelto CU01142E  (Leído 611 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Dejo la solución del ejercicio CU01142E del curso básico de JavaScript con ejercicios resueltos.

Citar
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>
<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>
« Última modificación: 30 de Septiembre 2020, 19:32 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
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

 

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".