Estás buscando que coincida con:
- Un dígito:
\d
- Una minúscula:
[a-záéíóúüñ]
- 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:
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.
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.