No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

JavaScript

28/29
Recursos

Aportes 55

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渆rror鈥 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

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

Cuando dice 鈥淓vitar 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)

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=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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(鈥渂oton鈥).disabled = false;
document.getElementById(鈥渋n鈥).style.backgroundColor = 鈥榖lue鈥;
} else {
document.getElementById(鈥渋n鈥).style.backgroundColor = 鈥榬ed鈥;
}
console.log(str);
}
</script>
</head>
<body>
<input type=鈥渢ext鈥 name="email"
onkeyup=鈥渧alidate(this.value)鈥 id=鈥渋n鈥>
<input type=鈥渂utton鈥 value=鈥渆nviar鈥 disabled id=鈥渂oton鈥 onclick=鈥渁lert(鈥楤IEN!!!鈥)鈥>
</body>
</html>

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

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

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>

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?

Super 煤til
https://regexr.com/

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]' ... ]

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

Ver a Beco en 1.25x, es como verlo en un estado alucin贸geno 馃槄

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>

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

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$

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

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.

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

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=鈥楶rueba de codgo鈥;
if(nombre.match(/^[^@][email protected][\w.]{2,10}.[\w]{2,5}$/i)) {
alert('Pepe ');
} else {
alert(鈥楽ofia鈥);
}

</script>

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 馃い

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 鈥渆nviar鈥 dependiendo si el correo es v谩lido o no.