1

Peguei um exercício daqui com o código a seguir, que aceita, no mínimo, 2 caracteres depois do ponto:

<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Fiz uma modificação ao colocar {,2}. Nesse caso, ele deveria aceitar, no máximo, 2 caracteres depois do ponto, certo? Por que ele está aceitando mais de 2? Como eu deveria fazer para ele aceitar até 2?

inserir a descrição da imagem aqui

1 Resposta 1

5

Conforme dito na documentação (e também explicado aqui), a regex que está no atributo pattern é compilada com a flag u (tem mais detalhes sobre esta flag aqui).

O que acontece é que quando esta flag está habilitada, a sintaxe da regex se torna mais restrita e passa a não aceitar determinados padrões. Veja a diferença:

// sem flag "u", OK
let r1 = /[a-z]{,2}/;
console.log('regex ok', r1);

// com flag "u", erro (Incomplete quantifier)
let r2 = /[a-z]{,2}/u;
console.log('não será impresso, pois dá erro na linha acima', r2);

Repare que a primeira regex não dá erro, mas a segunda sim. A presença da flag u faz com que a sintaxe se torne mais restrita e não aceite o quantificador sem o valor inicial (dá um erro: "Incomplete quantifier"). E quando a regex é inválida, o atributo pattern é ignorado.

Para corrigir, você deve indicar explicitamente que o valor mínimo é zero:

// indicar o valor mínimo igual a zero
let r = /[a-z]{0,2}/u;
console.log('regex OK', r);


Além disso, mesmo que {,2} não desse erro, ainda sim não iria funcionar da forma que você espera. Isso porque ele não é interpretado como um quantificador, e sim como literalmente o caractere {, seguido de vírgula, seguido de 2, seguido de }. Veja:

let r = /[a-z]{,2}/;

// no máximo 2 letras (não funciona)
console.log(r.test('a')); // false

// porque a regex na verdade é "uma letra, seguida de {,2}"
console.log(r.test('a{,2}')); // true

Ou seja, a solução para aceitar no máximo 2 caracteres é de fato colocar o zero:

<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"
   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{0,2}$">
  <input type="submit">
</form>

1
  • 1
    Vale lembrar que em algumas linguagens (como Python e Ruby, por exemplo) o {,2} funciona (significa "no máximo 2 ocorrências"). Na dúvida, eu diria para sempre usar {0,2}, que é mais garantido que funcione em todas...
    – hkotsubo
    Commented 19/10/2021 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .