Vayamos por partes, de más sencillo a más complicado, y simplificando todo en el final.
1. Sólo 3 dígitos
Si fuese sólo ver si tiene 3 dígitos, ¿para qué usar regex? Es un número entre 100 y 999, ¿no?
if (usuario > 99 && usuario < 1000) {
//válido
}
2. 3 dígitos en el final
Pero si el usuario es un nombre terminado en 3 dígitos, entonces tenemos que garantizarnos que el regex coincida desde el inicio (^
) hasta el final del texto ($
).
Recordemos que una expresión regular coincide con cualquier parte del texto (con la primera que encuentre). Por eso tu código fallaba, porque coincidía con los primeros 3 dígitos dentro de los 4 que tenía el texto.
textoterminadoen1234
// ^^^
// coincide con estos 3
Entonces, forzamos a que coincida con la posición inicial, cualquier cantidad de caracteres que no sean dígitos, los 3 dígitos, y la posición final del texto.
/^\D*\d{3}$/
\D
coincide con 1 caracter, cualquiera que no sea un dígito (es lo mismo que [^0-9]
; y el *
lo repite entre 0 e infinitas veces.
document
.getElementById('usuario')
.addEventListener('input',validar);
function validar() {
var usuario = document.getElementById('usuario').value,
resultado = document.getElementById('resultado');
patron = /^\D*\d{3}$/;
if(patron.test(usuario)){
resultado.innerText = "correcto";
}else{
resultado.innerText = "ERROR";
}
}
<input type="text" id="usuario" placeholder="Nombre de usuario">
<pre id="resultado"></pre>
3. Regex para exactamente 3 dígitos en cualquier posición
Ahora, si pueden estar en cualquier parte, hay que permitir \D*
entre medio de cada uno, que sería algo como /^\D*\d\D*\d\D*\d\D*$/
.
Pero se puede hacer más simple, usando un grupo (?:
…)
y repitiendo a ese grupo:
/^(?:\D*\d){3}\D*$/
document
.getElementById('usuario')
.addEventListener('input',validar);
function validar() {
var usuario = document.getElementById('usuario').value,
resultado = document.getElementById('resultado');
patron = /^(?:\D*\d){3}\D*$/;
if(patron.test(usuario)){
resultado.innerText = "correcto";
}else{
resultado.innerText = "ERROR";
}
}
<input type="text" id="usuario" placeholder="Nombre de usuario">
<pre id="resultado"></pre>
4. Eliminar todo lo que no es un dígito
Pero quizás, te sea mucho más sencillo eliminar todo, dejando sólo los dígitos y usando lo mismo que en el primer punto:
document
.getElementById('usuario')
.addEventListener('input',validar);
function validar() {
var usuario = document.getElementById('usuario').value,
resultado = document.getElementById('resultado');
var soloDigitos = usuario.replace(/\D+/g, '');
if(soloDigitos > 99 && soloDigitos < 1000){
resultado.innerText = "correcto";
}else{
resultado.innerText = "ERROR";
}
}
<input type="text" id="usuario" placeholder="Nombre de usuario">
<pre id="resultado"></pre>
usuario
son solamente 3 dígitos o es algo comonombre123
? ¿Podrías agregar un ejemplo en tu pregunta? Idealmente, todas las preguntas de regex deberían tener diferentes ejemplos de texto contra el cual intenta que coincidan y casos en los cuales no debería coincidir... Y si es algo más que esos 3 dígitos, ¿qué caracteres podría tener el resto del nombre?