Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

JavaScript

28/29
Recursos

Aportes 48

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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}$

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

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

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

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

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)

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

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 @ ([email protected]…) cuando se pedían de 5 a 10, luego cuando se pone cota superior ya se ponen 5 ([email protected]…) entonces hace match.

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

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

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

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

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?

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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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);
  }

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
            }
const valid = /[a-zA-Z_\.0-9][email protected][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

/^[^@_][email protected][\w\.]{2,}\.[\w]+$/
<!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>

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,}))$/

Genial

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…

function validate(str) {
  if (str.match(/^[^@_][email protected][\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)
}

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.

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?

Vientos!

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

<script>

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

</script>

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$

yo hice mi propia expresion para javascript

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

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

Like si encontraste el error en la expresión regular

Es comico ver como cada instructor en platzi programa tan distinto

Excellent this class

Interesante

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

Qué cool el match con cambio de color.

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

El profe es muy ameno! Excelente curso!

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.

Cool.

cool

Genial

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

bonton me suena a nombre de chocolate 🤤

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>

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 😉

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

Al código del profesor le agregué una sola línea para que el texto en caso sea correcto cambie a color blanco y sea legible, aquí la línea que agregué:

document.getElementById("in").style.color = 'white';

Y así se ve el código y ejecutando en el navegador:

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