Autor Tema: Curso Básico de JavaScript. Funciones JavaScript validar formulario ver CU01142E (Leído 1393 veces)

juandeto · « **en:** 31 de Marzo 2020, 19:36 »

Solucion al ejercicio CU01142E del curso básico de programador JavaScript de aprenderaprogramar

Consignas:

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

SOLUCIÓN

Código: [Seleccionar]


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ejercicio CUO1142E</title>
    <style type="text/css">
    body{
        background-color: lemonchiffon;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;    
    }
    label{
        font-size: large;
        padding: 7px;
        display: block;
    }
    </style>
    <script>

        function validar(){
            var textoIngresado=document.getElementsByTagName('input');
            var nombre=textoIngresado[0].value;var correo=textoIngresado[2].value;
            var apellido=textoIngresado[1].value;
            var arroba=correo.indexOf('@');var punto=correo.indexOf('.');
            
            
           
            if (nombre.length<3) {
                alert('El Nombre no cumple tener al menos tres letras');
            }
            if (arroba==-1||punto==-1){
                alert('compruebe que al correo electrónico no le falte el @ o el punto');
                    }

            nombre.toLowerCase();
            apellido.toLowerCase();
            correo.toLowerCase();

            var subcadenaAt=correo.replace (/at/g, '@');
           
        }


    </script>
</head>

<body>
    <h2>Ejercicio CUO1142 del curso básico de JavaScript</h2>
    <form action="" onsubmit="validar()" method="GET" name="cuestionario" id="formulario">
        <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>

Ogramar · « **Respuesta #1 en:** 01 de Abril 2020, 13:04 »

Buenas juandeto, el código está bastante bien pero tiene algunas cosas a mejorar:

- El ejercicio pide <<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”.>>

Esto no lo cumple tu código. Es fácil de arreglar que se detecte si falta la @ o si falta el . o si faltan ambos.

- El ejercicio pide que los parámetros que se envíen por el método get se transformen a minúsculas. Esto no lo cumple tu código. Por ejemplo hago una prueba y compruebo nombre=JUANI&apellidos=PEmeRINO&email=prueba%40prueba.com

Esto puedes comprobarlo mirando la url que te aparece una vez que envías. Ahí te tiene que aparecer transformado a minúsculas, si no te aparece transformado es que no lo has hecho bien. El problema es que cuando escribes por ejemplo nombre.toLowerCase(); no estás transformando lo que se envía con el método get. Eso simplemente transforma una variable local, pero eso no es lo que se quiere hacer.

- Otra cosa que no va bien es que si escribo juan at gmail.com me dice que le falta la arroba, cuando el ejercicio dice que debe reemplazarse at por @ Una cosa que conviene hacer es reemplazar cualquier cantidad de espacios seguido de at y de cualquier cantidad de espacios por @. Por ejemplo "at" se reemplazaría por "@", " at " lo mismo, " at " lo mismo.

Puedes consultar otras soluciones en los foros para ver cómo resolverlo.

Salu2

juandeto · « **Respuesta #2 en:** 02 de Abril 2020, 18:59 »

Gracias por la respuesta.

Me pondré a trabajar en ello.

Saludos

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

Noticias: