0

estoy intentando hacer un formulario de registro de usuarios, y parece que estoy entrando en algún problema absurdo o quizás...no! bueno la cosa es la siguiente, tengo un input para el usuario, otro para email, otro para confirmar email, otro para el password y su respectiva confirmación y el botón para ejecutarlo todo mediante un .addEventListener().

almaceno los valores de los input en variables, realizo las expresiones regulares y las utilizo con .test(). luego realizo dos if uno para comparar los emails y las password de confirmación y utilizo otro if para que si todo esta "ok" redireccionar al usuario a otro pantalla, pero ese segundo if no me funciona.

a ver si podeis ayudarme!!! Gracias de antemano!`

document.getElementById('registrarUser').addEventListener('click', (e)=> {
  e.preventDefault();

  let regUser = document.getElementById('user').value;
  let regEmail = document.getElementById('email').value;
  let regEmailConf = document.getElementById('emailConf').value;
  let regPass = document.getElementById('passFr').value;
  let regPassConf = document.getElementById('passConf').value;




  const userExp = new RegExp(/^([A-Za-z0-9_]{1,15}) $/);
  const resultadoUser = userExp.test(regUser);
  const emailExp = new RegExp(/^([\d\w_\.-]+)@([\d\w\.-]+)\.([\w\.]{3})$/);
  const resultadoEmail = emailExp.test(regEmail);
  // min 8 caracteres-max 15, almenos 1 Mayuscula,almenos 1 minuscula,al menos un digito, sin espacios en blanco, al menos un caracter
  const passExp = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])([A-Za-z\d$@$!%*?&]|[^ ]){8,15}$/);
  const resultadoPass = passExp.test(regPass)

  if (regEmail === regEmailConf && regPass === regPassConf) {
    console.log('email y pass iguales')
  }else alert('Los correos electronicos tienen que coincidir al igual que el password')

  if (resultadoUser && resultadoEmail && resultadoPass) {
    console.log('todo ok')
    location.assign("prueba.html");

  }else alert('algo estas haciendo mal')
  







})
<div class="registro" id="registro">
    <h1 id="cabezaRegistro">Registro</h1>
    <form action=" ">
        <input type="text" name="user" id="user" placeholder="usuario" required><br><br>
        <input type="email" name="email" id="email" placeholder="[email protected]" required><br><br>
        <input type="email" name="emailConf" id="emailConf" placeholder="confirma correo" required><br><br>
        <input type="password" name="passFr" id="passFr" placeholder="Contraseña" required><br><br>
        <input type="password" name="passConf" id="passConf" placeholder="Confirma contraseña" required><br><br>
        
        <button id="registrarUser">Registrarse</button>
    </form>
  </div>

`

1
  • resultadoUser, resultadoPass no está pasando el test del RegExp por eso siempre devuelve false, revisa que esté bien la expresión regular o que estés escribiendo lo correcto
    – TheVicShow
    Commented el 25 may. 2022 a las 16:13

2 respuestas 2

1

Hay varios problemas con tu código.

Te puedes evitar algunas comprobaciones de javascript si utilizas los atributos adecuados en los inputs como maxlength o minlength.

También es buena idea evitar el autocompletado de los campos de confirmación y contraseñas.

En lugar de escuchar al evento click es mejor escuchar al evento submit del formulario. De esta forma tenemos un mejor control.

Dicho esto, la parte de html, quedaría algo así:

    <form id="form" action="">
        <input
          type="text"
          name="user"
          id="user"
          placeholder="usuario"
          minlength="1"
          maxlength="15"
          spellcheck="false"
          required
        >
        <input
          type="email"
          name="email"
          id="email"
          placeholder="[email protected]"
          required
        >
        <input
          type="email"
          name="emailConf"
          id="emailConf"
          placeholder="confirma correo"
          autocomplete="off"
          required
          >
        <input
          type="password"
          name="passFr"
          id="passFr"
          placeholder="Contraseña"
          autocomplete="off"
          >
        <input
          type="password"
          name="passConf"
          id="passConf"
          placeholder="Confirma contraseña"
          autocomplete="off"
          >
        <button id="registrarUser" type="submit">Registrarse</button>
    </form>

En la parte de javascript podemos hacer varias mejoras.

Podemos sacar algunas variables que hay dentro del eventListener, asi como las expresiones regulares, de forma que dentro del eventListener solo se hagan las comprobaciones necesarias.

También te aconsejo que uses clausulas guardianes, de esta forma evitamos el anidamiento de los ifs y mejoramos la legibilidad del código.

La comprobación que haces con la expresión regular para la contraseña no es correcta. Estás comprobando demasiadas cosas con una sola expresión regular, es mejor hacer varias comprobaciones.

En el siguiente fragmento de código he agrupado estas comprobaciones en una función, de esta forma podemos darle al usuario un mejor feedback.

const form = document.querySelector('#form');

// form inputs
const formUser              = form.querySelector('#user');
const formEmail             = form.querySelector('#email');
const formEmailConfirmation = form.querySelector('#emailConf');
const formPass              = form.querySelector('#passFr');
const formPassConfirmation  = form.querySelector('#passConf');

// regular expressions
const userExp   = new RegExp(/^([A-Za-z0-9_]{1,15})$/);
const emailExp  = new RegExp(/^([\d\w_\.-]+)@([\d\w\.-]+)\.([\w\.]{3})$/);

/**
 * Check if the format of the password is correct
 * @param {String} pass - Password to be checked.
 * @return {String} In case the password is correct a empty string will be returned,
 * but if the password is incorrect a message will be returned.
 */
const checkPassFormat = (pass) => {
  if(pass.length < 8)
    return 'Password should be at least 8 characters long.';

  if(pass.length > 15)
    return 'Password should not exceed 15 characters long.';

  // check password has an uppercase letter 
  if(!/[A-Z]/.test(pass))
    return 'Password should contain at least one uppercase letter';

  // check password has an lowercase letter 
  if(!/[a-z]/.test(pass))
    return 'Password should contain at least one uppercase letter';

  // check password has a digit
  if(!/[0-1]/.test(pass))
    return 'Password should contain at least one digit';

  if(/\ /.test(pass))
    return 'Password can not have blank spaces';

  return '';
}

form.addEventListener('submit', (e) => {
  e.preventDefault();

  // check user format
  if(!userExp.test(formUser.value)){
    alert('Invalid user'); return;
  }

  // check email format
  if(!emailExp.test(formEmail.value)){
    alert('Invalid email'); return;
  }

  // check email and email confirmation are equal
  if(formEmail.value.localeCompare(formEmailConfirmation.value) != 0){
    alert('Emails are different'); return;
  }

  // check password
  let passCheckMsg = checkPassFormat(formPass.value);
  if(passCheckMsg != ''){
    alert(passCheckMsg); return;
  }

  // check password and password confirmation are equal
  if(formPass.value.localeCompare(formPassConfirmation.value) != 0){
    alert('Passwords are different'); return;
  }

  // check email and password are equal 
  if(formEmail.value.localeCompare(formPass.value) == 0){
    alert('Email and password can not be equal'); return;
  }

  location.assign("prueba.html");
});

Si tienes problema con las expresiones regulares te recomiendo que le eches un ojo a https://regex101.com/

Espero que te haya ayado.

1
  • muchas gracias me has ilustrado muy bien!!! y funciona de escándalo, es perfecta Commented el 25 may. 2022 a las 19:30
0

si no mal entiendo tienes un error de concepto, por consecuencia siempre caerá la primer validación si es que no te marca error. No se puede utilizar la condición If de esa manera, puede haber un if dentro de otro if ejemplo:

if(condición){
//si se cumple
  if(condicionInterna){
  //si se cumple
  }else{
  //si no se cumple
  }
}else{
//si no se cumple
}

O tambien if anidados ejemplo:

if(condicion){
//acción
}elseif(segundaCondición){
//acción
}elseif(tercerCondicion){
//acción
}else{
//si no se cumple ninguna
}

Según el contexto para tus condiciones seria:

document.getElementById('registrarUser').addEventListener('click', (e) => {
  e.preventDefault();

  let regUser = document.getElementById('user').value;
  let regEmail = document.getElementById('email').value;
  let regEmailConf = document.getElementById('emailConf').value;
  let regPass = document.getElementById('passFr').value;
  let regPassConf = document.getElementById('passConf').value;



  //tenias un espacio de mas al finalizar la cadena del regex
  const userExp = new RegExp("^([A-Za-z0-9_]{1,15})$");
  const resultadoUser = userExp.test(regUser);
  const emailExp = new RegExp(/^([\d\w_\.-]+)@([\d\w\.-]+)\.([\w\.]{3})$/);
  const resultadoEmail = emailExp.test(regEmail);
  // Entre 8 y 15 caracteres, por lo menos un numero, una mayúscula y una minúscula, un carácter especial ejemplo: Jose@gmailcom1
  //se modifico la cadena regex, cumple con los criterios
  const passExp = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,15}$/);
  const resultadoPass = passExp.test(regPass);

  if (regEmail === regEmailConf && regPass === regPassConf) {
    //imprime los valores que arrojan los resultados de tipo boolean, todos deben ser true para que se cumpla la condicion, los observas en consola. 
    console.log(regPass + regPassConf + resultadoPass + resultadoEmail + resultadoUser);
    //Modifique la condicion como te habia comentado.
    if (resultadoUser && resultadoEmail && resultadoPass) {
      console.log('todo ok');
      location.assign("prueba.html");
    } else {
      alert('algo estas haciendo mal');
    }
  } else {
    alert('Los correos electrónicos tienen que coincidir al igual que el password');
  }
});

Espero te sirva, saludos.

3
  • me sigue dando el error... pero esta muy bien visto Commented el 25 may. 2022 a las 16:42
  • Entonces verifica lo que te comento @TheVicShow, ya que al utilizar las expresiones regulares son muy estrictas, y si no cumplen la sintaxis mostrara siempre error o no cumplirá tu condición. Commented el 25 may. 2022 a las 16:47
  • Amigo he modificado la respuesta, prueba el Script de JS, me di a la tarea de hacer modificaciones y correcciones a los Regex, en mis pruebas ya funciona, me dices que tal te fue, suerte. Commented el 25 may. 2022 a las 19:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.