Home / Questions / 140556
Accepted
Richard
Asked: 2020-02-23 07:44:14 +0800 CST 2020-02-23 07:44:14 +0800 CST

使用正则表达式验证文本是否正好有 3 个数字

  • 772

我想在 JavaScript 中验证用户名或密码只接受带有正则表达式的 3 个数字。

我有以下内容，问题是当1234我输入它时接受它是正确的，我需要验证它才能执行我的页面的其余部分。

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

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

}
javascript

2 Answers

  1. Best Answer

    让我们按部分进行，从简单到复杂，最终简化一切。

    1.只有3位数

    如果只是看它是否有 3 位数字，为什么要使用正则表达式？这是一个介于 100 和 999 之间的数字，对吧？

    if (usuario > 99 && usuario < 1000) {
    //válido
}


    2.末尾3位

    但是如果用户是一个以 3 位数字结尾的名字，那么我们必须保证正则表达式从^文本的开头 ( ) 到结尾( ) 匹配$。

    回想一下，正则表达式匹配文本的任何部分（它找到的第一个部分）。这就是您的代码失败的原因，因为它与文本所具有的 4 位中的前 3 位数字匹配。

    textoterminadoen1234
//              ^^^
//       coincide con estos 3

    因此，我们强制匹配文本的起始位置、任意数量的非数字字符、所有 3 位数字和结束位置。

    /^\D*\d{3}$/
    • \D匹配 1 个字符，任何不是数字的字符（它与 ; 相同，[^0-9]并且*在 0 和无限次之间重复。

    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.正则表达式在任何位置正好3位数

    现在，如果它们可以在任何地方，您必须允许\D*彼此之间存在，例如/^\D*\d\D*\d\D*\d\D*$/.

    但它可以变得更简单，通过使用一个组(?:......)并重复该组：

    /^(?:\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.删除所有不是数字的东西

    但也许，消除所有内容会更容易，只留下数字并使用与第一点相同的内容：

    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>

    • 3

  2. 您的表达式的问题在于，如果您编写的文本连续包含 3 个数字，它将返回 true，因为这就是您的表达式的意思。

    您必须指出从字符串的开头到结尾，它只包含 3 个^在开头和$结尾使用的数字：

    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>

    ^表示在字符串的开头和$结尾处搜索。

    • 2