4

Quiero validar en JavaScript que el usuario o contraseña solo acepten exactamente 3 números con expresión regular.

Tengo lo siguiente, el problema es que cuando ingreso 1234 me lo acepta como correcto, necesito validar esto para poder realizar el resto de mi página.

function validar() {
    usuario = document.getElementById('usuario').value;

    patron = /\d{3}/;
    if(patron.test(usuario)){
        alert("correcto")
    }else{
        alert("ERROR")

}
3
  • Bienvenido para que tu pregunta sea bien recibida te invito a leer Cómo preguntar Commented el 22 feb. 2018 a las 15:51
  • @Richard ¿El texto en usuario son solamente 3 dígitos o es algo como nombre123? ¿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?
    – Mariano
    Commented el 22 feb. 2018 a las 16:09
  • usuario podra llevar letras y numeros, la contraseña tiene que llevar 3 numeros y letras exactamente, 6 caracteres en total repartido en 3 y 3..
    – Richard
    Commented el 22 feb. 2018 a las 18:00

2 respuestas 2

3

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>

2

El problema con tu expresión es que si escribes un texto que tenga 3 números seguidos, esta va a retornar true debido a que eso es lo que tu expresión significa.

Tienes que indicarle que desde el principio hasta el final del string, solo contenga 3 numeros utilizando ^ al principio y $ al final:

function validar() {

  usuario = document.getElementById('usuario').value;

    patron = /^[0-9]{3}$/;
    if(patron.test(usuario)){
        alert("correcto")
    }else{
        alert("ERROR")
    }

}
<input id="usuario" type="text" />

<button onclick="validar()"> Validar</button>

^ significa que busque al inicio del string y $ al final.

1
  • El [0-9] se ve feo pudiendo usar \d.
    – Mariano
    Commented el 22 feb. 2018 a las 16:43

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.