JavaScript

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 …!

Axel Vasquez

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

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

Jhon Carlos Colorado Angulo

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

Carlos Andres Castañeda Osorio

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

Wilson Marino Pablo Mendez

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

Ameth Ordoñez Erazo

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

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

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

JHON HABACUC CHAVEZ GARCIA

<!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>

Cristian David Guillermo Reinales Cardenas

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)

ezequielbisiach

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.

Ernán Alexander Velásquez Ramírez

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

edgar limones lozano

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]}`);
      }

Alonso Montenegro Morelos

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

Miguel Ángel Reyes Moreno

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

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);
  }

Joel vilca Alania

Validar número de tarjeta de crédito:
^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

Validar un código postal:
^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$

Validar dirección IP:
^(([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$

Validar número de telefóno:
^+?\d{1,3}?[- .]?(?(?:\d{2,3}))?[- .]?\d\d\d[- .]?\d\d\d\d$

Jeinfferson Bernal G

Codigo de la clase!

<html>
    <head>
        <title>JS + Regex </title>
        <script>
            function validate(str){
                if(str.match(/^\w{5,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('cool')">
    </body>
</html>

Brayan durango

Se podría utilizar el else para que no se habilite el botón cuando no se cumpla la expresión regular.

function validate(str){
                if(str.match(/REGEX/)){
                    document.getElementById("boton").disabled = false;
                    console.log(str);
                }**else{
                    document.getElementById("boton").disabled = true;
                }   **
            }

Andres Silva Vega

Para utilizar las busquedas encontradas se puede devolver el valor del String.match en una variable. Al hacer console.log allí estarán

function validate(value){
   let found_ = [];
   if(found_ = value.match(/^([^@_]+)@([\w\.]{2,})(\.[\w]{2,3})$/i)){
      console.log(found_);
   }
}

La salida para el input [email protected] seria:

['[email protected]', 'nombre.mail', 'mail', '.com', index: 0, input: '[email protected]' ... ]

Nestor Rios Garcia

Así quedo el mío

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegEx</title>
</head>
<body>
    <main>
        <h1>
            Ingresa un correo electronico
        </h1>
        <div>
            <input type="text" id="input">
            <button  id="validar" onclick="Validate()">Validar</button>
        </div>
    </main>
    <script>
        input = document.getElementById("input")

        function Validate() {
            console.log(input.value);
            if (input.value.match(/^[^@.]*@[\w]*\.[\w]{2,}/)) {
                alert("listo")
            } else {
                alert("no")
            }
        }
    </script>
</body>
</html>

Jeyson camilo Guzman Rico

const valid = /[a-zA-Z_\.0-9]+@[g-o-h]+[a-z]+\.+\w{3,5}/.test(correo)

test() también es bueno para hacer match con expresiones regulares donde los valores que retorna son true si hay match y false cuando no hay match

Alejandro Sanchez

Like si encontraste el error en la expresión regular

NombreDeUsuarioInvalido12345567

muy bien ya se como funcionan esos malditos validadores de formularios jaja

mario fernando robayo restrepo

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

Isaac Bryan Ascanoa Roncall

Es increible la forma de usar las validaciones en FrontEnd para comprobar su funcionamiento en los campos y su boton. Espero a ver las expresiones regulares en una terminal. Saludos

Wilson Montenegro

Buen curso de terminal con BECO, lastima que ya lo cambiaron.

Jorge Ossa

Comparto mi ejercicio toma su tiempo pero son poderosas las expresiones regulares.

Me quedo una duda, ¿en Javascript también puedo hacer uso de los grupos?

Mario Alexander Vargas Celis

hace 3 meses

### Clases de Caracteres Predefinidas * `\d`: Coincide con cualquier **dígito** (equivalente a `[0-9]`). * `\D`: Coincide con cualquier carácter que **no sea un dígito**. * `\w`: Coincide con cualquier carácter alfanumérico (letras y números, incluyendo el guion bajo). * `\W`: Coincide con cualquier carácter que **no sea alfanumérico**. * `\s`: Coincide con cualquier **espacio en blanco** (incluye tabulaciones y saltos de línea). * `\S`: Coincide con cualquier carácter que **no sea un espacio en blanco**.

Giovanni Didier Valdivia García

hace 5 meses

Hay un bug en la aplicación móvil, en la pregunta para validar emails, al darle click abre gmail y al regresar el examen ya está cerrado D:

Daniel Ochoa

hace 10 meses

tu error era que decia \[^@\_] esto implica un solo caracter, debias añadir un + para que implique varios caracteres.

luimarco daniel Carrascal Diaz

hace 10 meses

Jaime Alexander Calderon Zamora

hace un año

Hola, en mi código no se la razón, pero no importa lo que ponga siempre sale Azul (lo que puse para correcto) y nunca sale rojo (lo que puse para incorrecto)

Francisco Carusso

Super útil
https://regexr.com/

Yefri Enmanuel Encarnación Jiménez

Este el codigo de lo que hice espero que a alguien le sirva 😁

<!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:active {
      transform: scale(.8);
    }
    .btn:not([disabled]):hover {
      transform: scale(1.1);
    }

    .btn[disabled] {
      background-color: #c54343;
      border-bottom: 5px solid #b43535;
        opacity: .7;
    }

    
  </style>
</head>
<body>
  <input type="text" id="email" placeholder="Your Email" onkeyup="Validate(this)" autofocus>
  <input type="button" id="bt-input" value="submit" class="btn" onclick="correct()" disabled>
  
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script>

    function Validate(input) {
        const value = input.value
        const bt = input.nextElementSibling
        const Match = value.match(/^([a-z]+?[\w\.]{2,})@([\w]{3,}\.[a-z]{2,5})/i)
        if (Match) {
            console.log(Match[1], " ", Match[2])
            bt.disabled = false
            input.style.outlineColor = "initial"
            return;
        }
        bt.disabled = true
        input.style.outlineColor = "#ff0000"
    }

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

psd: Tome la estructura hecha por @lewss
solo modifique un poco los estilos y le agregue mi propia función de validación.

Eday Alix González Manjarrés

A mi me quedó así


if(str.match(/^\w{2,10}@\w+\.[a-z]{2,3}(\.[a-z]{2})?$/))
            {
                document.querySelector("[name=enviar]").disabled=false
            } else {
                document.querySelector("[name=enviar]").disabled=true
            }

Cristian David Franco Garcia

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS + Regex</title>
</head>

<body>
    <input id="emailField" type="text" name="email" onkeyup="validate(this.value)">
    <input id="sendButton" type="button" value="Send" onclick="onClickSendButton()" disabled>
    <script>
        function validate(email) {
            if (email.match(/^\w{5,10}@[\w\.]{2,10}\.\w{2,5}$/i)) {
                document.getElementById('emailField').style.backgroundColor = 'green';
                document.getElementById('sendButton').disabled = false;
            } else {
                document.getElementById('emailField').style.backgroundColor = 'red';
                document.getElementById('sendButton').disabled = true;
            }
        }

        function onClickSendButton() {
           alert('Cool!');
        }
    </script>
</body>

</html>

María Eugenia Pereira Chévez

Para validar el email

/^(([^<>()\[\]\\.,:\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,}))$/

Oscar Jaramillo

Genial

Abraham Milesot

Siempre había querido aprender y entender la expresiones regulares y les tenia mucho miedo/respeto, pero son (hasta el momento) mas simples de lo que imagine y ahora las entiendo y hasta puedo crearlas xD…

Jonathan Sebastian Sanchez Sanabria

Estoy intentado separar números cada 4 dígitos dentro de un input, tengo esta expresión regular
const numberRE = originalNumber.replace(/\D/g, '').replace(/(?=(\d{4})+(?!\d))/g, ' ');
Pero me pone el espacio de forma errada, ya que cuenta los 4 dijitos de atrás para adelante, un ejemplo es este:

pasa de: 12345 ó 1234567
a: 1 2345 ó 123 4567

y lo que quiero lograr es:

pasar de: 12345 ó 1234567
a: 1234 5 ó 1234 567

Alguien sabe dónde podría estar el error?

Pedro Iván Juárez Cornejo

Vientos!

Cesar Augusto Morales Godoy

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

Ale17273has

var nombre=‘Prueba de codgo’;
if(nombre.match(/^[^@]+@[\w.]{2,10}.[\w]{2,5}$/i)) {
alert('Pepe ');
} else {
alert(‘Sofia’);
}

</script>

Wellington Perez

yo hice mi propia expresion para javascript

<code>/^[\w\.]{5,}@\w+\.\w{3,5}(\.\w{2,5})?/i

Alejandro Sanchez

Es comico ver como cada instructor en platzi programa tan distinto

Alejandro Sanchez

Excellent this class

Gomez

Interesante

oteka21

Mi aporte

$input.addEventListener("input", function(e) {
  const {
    target: { value }
  } = e;
  if (value.match(/^[^@.]+[._]?.*@.*\.[\w]{2,5}$/i)) {
    $input.style.border = "1px solid green";
    $button.disabled = false;
  } else {
    $input.style.border = "1px solid red";
    $button.disabled = true;
  }
});

Luis Ruiz Ramos

Qué cool el match con cambio de color.

Nicolasdds

alguien entendió lo que dice al minuto 10:50?

rorygrimm

El profe es muy ameno! Excelente curso!

Francisco Javier Suarez Verdugo

Muy buena clase instructor Alberto, se ve claramente cuando se cumple con la expresión regular al colocar el correo para notificar de inmediato al usuario.

Alex Fernández

Cool.

jhan carlos mora bayer

cool

Ariadna B

Genial

Julian David Orozco Colorado

No lo haga pero… Ensaye, Cool pero el profe Beco manejando 5 lenguajes de programacion diferentes, cuando tendre ese nivel.

zomars

bonton me suena a nombre de chocolate 🤤

Angei Portuges

En este sección del curso hubo tanta naturalidad con Beco que me encanto, nos enfatiza en aprender de los errores, no frustrarnos y buscar maneras de solucionarlo 😉

Jefersson Nuñez Nava

En el minuto 12:10, le faltó añadirle dos letras antes del @

Aldo Miguel Ortiz Parodi