2

Necesito una función que me permita validar en una contraseña por lo menos:

  1. Si tiene por lo menos un dígito ubicado en cualquier sitio.
  2. Si tiene por lo menos una letra en minúscula ubicada en cualquier sitio.
  3. Si tiene por lo menos una letra en mayuscula ubicada en cualquier sitio.

He intentado hacer algo, pero no soy bueno en eso del regex:

$('#cajat').keyup(function(e){
  var alfan = /^[a-zA-Z0-9]$/
  if(alfan.test($(this).val()))
    resp = 'SI';
  else
    resp = 'NO';
  $('.mostrar').html(resp)
})

La idea es que este tipo de contraseñas sean válidas:

Contraseña01
5
  • Bienvenido te invito a leer Cómo preguntar para que según los consejos que se te den ahí edites la pregunta y sea bien recibida por la comunidad el 25 abr. 2018 a las 15:58
  • Tienes algo escrito hasta ahora? el 25 abr. 2018 a las 17:06
  • no, no tengo nada, eh tratado de buscar en Internet como hacerlo pero no me han funcionando los que he encontrado, al principio encontré uno para validar correos y me funciono por eso estoy tratando de ver si alguien me ayuda con alguno para lo estoy buscando
    – Rayzers
    el 25 abr. 2018 a las 19:04
  • @Mariano Ya edite el post a una manera en que mi pregunta sea mas comprensible, espero que me puedan ayudar :)
    – Rayzers
    el 25 abr. 2018 a las 21:21
  • 1
    @Mariano estupidez mía, disculpa, a eso me referir a cualquier letra en minúscula. Osea que valide que en la cadena haya una letra en mayúscula, una en minúscula y un numero
    – Rayzers
    el 25 abr. 2018 a las 22:04

1 respuesta 1

2

Estás buscando que coincida con:

  1. Un dígito: \d
  2. Una minúscula: [a-záéíóúüñ]
  3. Una mayúscula: [A-ZÁÉÍÓÚÜÑ]


Al ser más de una condición sobre el mismo texto, el motor de regex tiene que recorrer el string completamente para cada condición. Por lo tanto, usamos una inspección positiva (positive lookahead) para eso, cuya sintaxis es (?=).

Una inspección intenta coincidir con el subpatrón y, luego de coincidir, el cursor sigue desde la misma posición en la que estaba antes de intentar dicha inspección. Se puede pensar como una construcción que únicamente devuelve verdadero/falso, pero el resto del regex puede seguir como si nada hubiese pasado (si devolvió verdadero, claro).

Entonces, para incluir a estas condiciones en la misma expresión, verificando desde el inicio del texto (^):

/^(?=.*\d)(?=.*[a-záéíóúüñ]).*[A-ZÁÉÍÓÚÜÑ]/


Código:

document
  .getElementById('campo')
  .addEventListener('input', function(evt) {
    const campo = evt.target,
          valido = document.getElementById('campoOK'),
        
          regex = /^(?=.*\d)(?=.*[a-záéíóúüñ]).*[A-ZÁÉÍÓÚÜÑ]/;

    //Se muestra un texto válido/inválido a modo de ejemplo
    if (regex.test(campo.value)) {
      valido.innerText = "válido";
    } else {
      valido.innerText = "incorrecto";
    }
  });
<p>
    Contraseña:
    <input id="campo">
    <span id="campoOK"></span>
</p>



Nota aparte: Validar en el evento keyup o keypress es cosa del pasado.
No se recomienda, ya no se usa, por dos motivos principales:

  1. Actualmente, muchos ingresos de texto no son con teclas. Los celulares no tienen teclas, o cuando copiás y pegás texto tampoco estás enviando una tecla... y ninguno de estos dispara un evento keypress.
    -Hacé la prueba en tu celular y vas a ver que no dispara al evento.

  2. Y ya no se acostumbra prohibir el ingreso de nada. ¿Recordás alguna página profesional que impida que ingreses un caracter? Al contrario, lo que se suele hacer es permitir todo, y marcar en algún color o mostrar un pequeño mensaje cuando es incorrecto. Incluso, por lo general no se marca mientras se está escribiendo, sino cuando se pierde el foco o cuando se envía el formulario.


Una alternativa sencilla es usar el atributo pattern de los inputs (HTML5)... y chau código!

input[type=text] {
    width: 40ch;
}
input:invalid {
    border: 2px solid red;
}
<form action="https://i.stack.imgur.com/YQUj9m.jpg">
  <input type="text"
         placeholder="Ingrese el texto"
         pattern="(?=.*\d)(?=.*[a-záéíóúüñ]).*[A-ZÁÉÍÓÚÜÑ].*"
         title="Debe tener al menos una mayúscula, una minúscula y un dígito"
  >
  <br>
  <input type="submit"
         value="Probar"
  >
</form>

  • Actualmente está soportado por la mayoría de los navegadores modernos (IE10+)
    (ver compatibilidad).


Te recomiendo leer Validación de formulario de datos (MDN).

O, si realmente la idea es tener un control de cada uno de los cambios, los eventos a tener en cuenta son: submit, blur e input.

1
  • 1
    Gracias me funciono correctamente :D
    – Rayzers
    el 25 abr. 2018 a las 22:45

Tu Respuesta

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

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