Validación de Emails con JavaScript y Expresiones Regulares

Clase 28 de 29 • Curso de Expresiones Regulares

Resumen

¿Cómo se integran las expresiones regulares en el frontend con JavaScript?

Las expresiones regulares, aunque a menudo se utilizan en el backend para tareas como la configuración de servidores o el procesamiento de datos, también tienen un papel crucial en el frontend. En particular, JavaScript ofrece capacidades robustas para implementar estas expresiones, lo cual es vital para la validación de datos y la mejora de la interacción usuario-sistema. Esto ayuda a prevenir errores comunes del usuario, a menudo descritos como "errores de capa 8", aquellos que ocurren entre el teclado y la silla.

¿Cómo se crea un validador simple de correo electrónico?

Para crear un validador de correo electrónico en el frontend, vamos a utilizar un documento HTML sencillo y escribir JavaScript directamente en él, sin depender de bibliotecas externas como jQuery. La idea es usar expresiones regulares para validar que un valor de entrada se asemeje a un correo electrónico válido.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS + Regex</title>
    <script>
        function validate(str) {
            // La expresión regular podría ser sencilla
            const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/;
            const inputField = document.getElementById('emailInput');
            const submitButton = document.getElementById('submitButton');

            if (regex.test(str)) {
                inputField.style.backgroundColor = 'blue';
                submitButton.disabled = false;
            } else {
                inputField.style.backgroundColor = 'red';
                submitButton.disabled = true;
            }
        }
    </script>
</head>
<body>
    <input type="text" id="emailInput" onkeyup="validate(this.value)" placeholder="Enter your email">
    <button id="submitButton" disabled>Enviar</button>
</body>
</html>

¿Qué problemas se pueden encontrar al usar expresiones regulares en JavaScript?

En JavaScript, las expresiones regulares pueden interrumpir la ejecución de manera inesperada si no se construyen correctamente. Es crucial recordar que:

Sintaxis específica: JavaScript puede interpretar las expresiones regulares ligeramente diferente a otros lenguajes de programación.
Errores de expresión: Es fácil atascarse en un bucle de intentos y errores; por lo tanto, comenzar con una expresión simple incrementando su complejidad gradualmente puede ser la mejor estrategia.
Cross-browser issues: La interpretación de las expresiones puede variar entre diferentes navegadores, por lo cual es vital realizar pruebas en múltiples entornos.

¿Cómo depurar expresiones regulares en JavaScript?

El proceso de depuración debe ser metódico:

Desglosa el problema: Si la expresión regular no funciona como se espera, puede ser útil dividirla en partes más pequeñas y probar cada parte de forma independiente.
Uso de alerts/console.logs: Aunque no es recomendable abusar de los alerts para la depuración, pueden ser útiles para probar la funcionalidad paso a paso.
Ajustes de case sensitivity: Algunos problemas pueden solucionarse ajustando la sensibilidad a las mayúsculas y minúsculas.

Con estas herramientas y técnicas, puedes lograr una validación eficiente en tus proyectos web frontend sin necesidad de pesadas librerías adicionales. Además, la comprensión fundamentada de las expresiones regulares en JavaScript ofrece valiosas habilidades técnicas transferibles a otros lenguajes de programación y entornos de trabajo. ¡Sigue experimentando, aprendiendo y refinando tu maestría en expresiones regulares para llevar la funcionalidad de tu frontend al siguiente nivel!

Julio Torres

student•

Para mí, ha sido de mucha ayuda que el profesor Alberto se arriesga a cometer errores. Y eso es genial..! porque enseña como afrontar esas situaciones y darles solución. Ese conocimiento es realmente muy valioso ..!

Julio Hernandez Gorocica

student•

Es lo mejor de los cursos, que los mentores se equivoquen para aprender a resolver problemas. Concuerdo contigo tocayo!

Lucas Pontoriero

student•

Coincido con el comentario, es muy bueno el profe Alberto con su metodologia.

Ivan Santiago

student•

Codigo para que se vea chida la pagina 😄

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Js Regex</title>

  <style>
    body {
      font-family: Arial;
    }

    input {
      font-size: 18px;
      padding: 6px;
    }

    .btn {
      cursor: pointer;
      border: none;
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 18px;
      color: white;
      background-color: #43c579;
      border-bottom: 5px solid #35b46a;
      box-shadow: 3px 3px 10px 0 rgba(65, 65, 65, 0.849);
      margin-left: 18px;
      transition: 300ms;
    }

    .btn:hover {
      background-color: #3ab36c;
      border-bottom: 5px solid #289b58;
      transform: scale(1.1);
    }

    .disabled {
      background-color: #c54343;
      border-bottom: 5px solid #b43535;
    }

    .disabled:hover {
      background-color: #b33a3a;
      border-bottom: 5px solid #9b2828;
    }
  </style>
</head>
<body>
  <input type="text" id="email" placeholder="Your Email" onkeyup="validate(this.value)" autofocus>
  <input type="button" id="button" value="submit" class="btn disabled" onclick="correct()" disabled>
  
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script>
    const button = document.getElementById('button')

    function validate(email) {
      if(email.match(/^[^@]+@[\w\.]{2,10}\.[\w]{2,5}$/i)) {
        button.disabled = false
        button.classList.remove('disabled')
      } else {
        button.disabled = true
        button.classList.add('disabled')
      }
    }

    function correct() {
      swal({
        title: 'Congratulations!',
        text: 'This is a correct Email',
        icon: 'success',
        button: 'Thank\'s'
      })
    }
  </script>
</body>
</html>

Nathaly Stefani Riaño Bejarano

student•

Excelente aporte! Muchas Gracias

Aldo Miguel Ortiz Parodi

student•

Hermoso compañero, espero aprender esto y más porque terminando el curso de POO iré directo a la escuela de desarrollo web!

Axel Vasquez

student•

el problema del primer intento:

^[^@_]@[\w\.]{2,}\.[\w]{2,5}$

fue que en la parte de “[^@_]” no agrego si se podía repetir, por lo tanto solo aceptaba correos con un solo carácter antes del “@” agregando corchetes, asterisco o mas, ya aceptaría funcionaria sin problemas:

^[^@_]+@[\w\.]{2,}\.[\w]{2,5}$
^[^@_]*@[\w\.]{2,}\.[\w]{2,5}$
^[^@_]{2,}@[\w\.]{2,}\.[\w]{2,5}$

jhoan sebastian arias pulido

student•

El problema del minuto 12:00 no es que javascript no permita la cota superior infinita, el problema es que beco tenía la expresión para que antes del arroba tuviera entre 5 y diez caracteres alfanuméricos y a la hora de probar lo hizo con tres. 😉

CIRO VLADIMIR ARREOLA CAMACHO

student•

efectivamente, lo probé con el siguiente código y funcionó perfectamente

<html>
    <header>
        <script>
            function validate(str){
                if(str.match(/^\w{3,}@[\w\.]{2,}\.\w{2,5}$/)){
                    console.log(str)
                    document.getElementById('fldMail').style.backgroundColor = 'lightblue'
                }else {
                    console.log('formato de correo incorrecto: ', str)
                    document.getElementById('fldMail').style.backgroundColor = 'salmon'
                }
            }
        </script>
    </header>
    <body>
        <input type="email" onkeyup="validate(this.value)" id="fldMail">
    </body>
</html>

Alan Quispe

student•

Es verdad lo acabo de probar y funcionó

Danelia Sanchez Sanchez

student•

Algunas banderas de expresiones regulares en Javascript:

g: busca un patrón más de una vez.
i: caso sensitivo (ignora mayúsculas y minúsculas).
m: búsqueda en múltiples líneas.

Pueden combinarse varias banderas.
Expresiones Regulares en Javascript

Lester Fibla Saavedra

student•

No es “caso sensitivo”, es “case insensitive”

Danelia Sanchez Sanchez

student•

Tienes razón. Gracias 😃

Jhon Carlos Colorado Angulo

student•

Genial, sorprendido de ver como el profesor maneja diferentes tipos de lenguajes. Waauuu

Carlos Andres Castañeda Osorio

student•

Como aclaración la cota superior infinita lo he probado y si funciona en Javascript, según puedo ver en el video, en el segundo "error" lo que pasó fue que a la primera parte del correo se le aumentó el valor de la cota inferior a 5 y el profesor probó con un correo abc@gmail.com por lo que no pasaría la expresión regular

Alejandro Sanchez

student•

Tienes toda la razón brother yo también realice la misma prueba y es eso.

Alejandro Sanchez

student•

Si permite la cota superior ilimitada

Wilson Marino Pablo Mendez

student•

Antes del curso al validar mis formularios me lleva bastante codigo y ahora con expresiones regulares totalmente fenomenal.

Ameth Ordoñez Erazo

student•

Con la expresión regular ya completa para validar todas las formas de Emails y con un diseño algo bonito...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegExp en JavaScript</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial;
        }
    
        input[type="text"] {
          font-size: 14px;
          width: 250px;
          padding: 6px;
          color: #598b09;
        }

        input[type="text"].error {
            color: red;
        }

        .btn{
            text-align: center;
            background-color: #7dc800;
            padding: .6em .8em .8em;
            border: none;
            color: white;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: inset 0 -.2em rgba(0,0,0,.2);
            outline: 0;
            transition: .2s;
            will-change: transform;
        }
        .btn:active{
            transform: scale(.9);
        }
        
        .btn:disabled{
            background-color: gray;
            transform: initial;
        }
    </style>
    <script>
        function Validar(){
            var Email = document.getElementById("email").value;
            var btn = document.getElementById("btn");
            var textbox = document.getElementById("email");
            if(Email.match(/^[\w\.\-_\+]{5,30}@[\w\.\-]{3,}\.\w{2,5}$/i)){
                btn.disabled = false;
                console.log(Email+": Entro")
                textbox.classList.remove("error")
            }else{
                console.log(Email+": NO entro")
                textbox.classList.add("error")
            }
            // console.log(Email);
        }
    </script>
</head>
<body>
   <input type="text" id="email" autocomplete="off" onkeyup="Validar();" />
   <input type="button" id="btn" class="btn" value="Enviar" disabled="disabled" />
</body>
</html>

Danilo Toro

student•

El error inicial era que solo aceptaba un caracter, le falto el “+”.

/^[^@]+@[\w.]{2,}.[\w]{2,5}$/i Así funciona

JHON HABACUC CHAVEZ GARCIA

student•

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS + Regex</title> <script> function validate(str) { if(str.match(/^\w{2,10}@[\w\.]{2,10}\.\w{2,5}$/i)) { document.getElementById("boton").disabled = false; document.getElementById("in").style.backgroundColor = 'blue'; } else { document.getElementById("in").style.backgroundColor = 'red'; } console.log(str); } </script> </head> <body> <input type="text" name="email" onkeyup="validate(this.value)" id="in"> <input type="button" value="enviar" disabled id="boton" onclick="alert('BIEN!!!')"> </body> </html>

Carlos Enrique Ramírez Flores

student•

Tu expresión es perfecta!

Cristian David Guillermo Reinales Cardenas

student•

Cuando dice “Evitar errores Capa #8”, se refiere a el modelo OSI, que tiene (1-7) y el “#8” seríamos nosotros, los usuarios, quienes cometamos el error (Mas información el el curso de redes)

Ezequiel Bisiach

student•

Hola, quería comentar que el primer error es en la primer parte de la expresión regular: ^ [^@_]@ ... $ donde no se coloca un + o *, pidiendo solo una cosa de esa clase y nada mas. Luego quería aclarar que JavaScript si permite la cota superior infinita(lo acabo de probar yo), el error es que cuando se prueba con cota infinita se ponen 3 caracteres antes del @ (abc@...) cuando se pedían de 5 a 10, luego cuando se pone cota superior ya se ponen 5 (abcde@...) entonces hace match.

Alonso Montenegro Morelos

student•

Ver a Beco en 1.25x, es como verlo en un estado alucinógeno 😅

Ernán Alexander Velásquez Ramírez

student•

Habitilo o deshabilito el botón "enviar" dependiendo si el correo es válido o no.

edgar limones lozano

student•

Aquí uso los agrupadores, espero les sirva de algún modo.

      let str2 = `2018-06-03,South Africa,Madagascar,0,0,COSAFA Cup,Polokwane,South Africa,FALSE`;
      function validate2(str){
        let regexFut = /^(20\d\d-.*),(.*),(.*),(\d+),(\d+),([\w\s]+),.*$/;
        let result = str.match(regexFut);
        console.log(`Fecha: ${result[1]}
${result[2]} (${result[4]} - ${result[5]}) ${result[3]}
Torneo: ${result[6]}`);
      }

Alejandro Sanchez

student•

Es comico ver como cada instructor en platzi programa tan distinto

Cesar Augusto Morales Godoy

student•

De verdad que un gran profesor dió el curso de Introdución a la terminal y linea de comandos! 😁👍🏼 Áhora hay un nuevo curso pero me gustó más este

Miguel Angel Reyes Moreno

student•

function validate(str) {
  if (str.match(/^[^@_]+@[\w\.]{2,}\.[\w]{2,5}$/i)) {
    //* Validando un email con una expresión regular
    document.getElementById("boton").disabled = false
    document.getElementById("email").style.backgroundColor = "green"
  } else {
    document.getElementById("boton").disabled = true
    document.getElementById("email").style.backgroundColor = "red"
  }
  console.log(str)
}

Luis Rogelio Reyes Hernandez

student•

Evaluando con valores true false en una expresión regular más compleja para validar el email

function checkEmail(email) {
    console.log(email);
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;

    var result = re.test(String(email).toLowerCase());

    if (result) {
      document.getElementById('boton').disabled = false;
      document.getElementById('email').style.backgroundColor = 'green';
    } else {
      document.getElementById('boton').disabled = true;
      document.getElementById('email').style.backgroundColor = 'red';
    }
    console.log(result);
  }