0

Possuo a seguinte expressão:

(/[^\d]/g, '')

Estou utilizando esta expressão em uma função JavaScript para que um input type="text" aceite somente números. O problema é que agora preciso que esta função também permita os caracteres ()+.

Já fiz algumas pesquisas mas não achei nada muito didático, tendo em vista que comecei a mexer com expressões regulares há pouco tempo.

Como poderia habilitar estas caracteres através de expressões regulares?

4
  • 2
    Não seria o caso de só escapá-los? Ficaria algo assim: (/[^\d\+\(\)]/g, '') Commented 1/10/2019 às 16:02
  • 1
    Como vc está usando a regex? Porque [^\d] na verdade pega qualquer coisa que não seja número (e já permite os caracteres (, ) e +, veja: regex101.com/r/AUKban/1)
    – hkotsubo
    Commented 1/10/2019 às 16:26
  • 2
    @FelipeAvelar Dentro de colchetes esses caracteres não precisam ser escapados: jsfiddle.net/8o5zhkL7
    – hkotsubo
    Commented 1/10/2019 às 16:27
  • @hkotsubo Irei conferir. Muito obrigado.
    – Levi
    Commented 1/10/2019 às 16:28

2 Respostas 2

2

Acho que isso resolve: [^\d()+]

const f = (ev) => {
if(ev.key.match(/[^\d()+]/)) {
ev.preventDefault();
}
}
<input type="text" onkeypress="f(event)" />

2

Uma solução é usar o atributo pattern do input:

const campo = document.querySelector('#campo');

campo.addEventListener('input', () => {
  campo.setCustomValidity('');
  campo.checkValidity();
});

campo.addEventListener('invalid', () => {
    campo.setCustomValidity('O campo só pode ter números ou os caracteres ()+');
});
/* deixar borda vermelha enquanto o campo for inválido */
input:invalid {
  border: red 1px solid;
}
<form>
  <input id="campo" type="text" pattern="^[\d()+]+$" required />
  <input type="submit" value="ok">
</form>

O pattern recebe uma expressão regular dizendo exatamente o que ele pode ter. No caso, usei ^[\d()+]+$.

Os marcadores ^ e $ são respectivamente o início e fim da string. Assim, eu garanto que o campo só vai ter o que eu determinar.

Em seguida tenho a classe de caracteres [\d()+] que pega qualquer caractere que seja \d (um atalho que significa "dígito de 0 a 9"), ou um (, ou ), ou +.

Logo depois temos o quantificador +, que significa "uma ou mais ocorrências". Ou seja, o campo pode ter um ou mais caracteres, desde que eles correspondam a [\d()+]. Mas se quiser, pode trocar para quantidades mais específicas:

  • [\d()+]{5,20}: no mínimo 5 e no máximo 20 caracteres
  • [\d()+]{5,}: no mínimo 5 caracteres, sem limite máximo
  • [\d()+]{5}: exatamente 5 caracteres

Ajuste os valores de acordo com o que precisar.


A diferença desta solução para a outra resposta é que esta não impede que o usuário digite caracteres inválidos. Ela apenas impede que o formulário seja submetido (e mostra uma mensagem caso ele tente submeter com dados inválidos - sendo que esta mensagem pode ser trocada com setCustomValidity, conforme mostrado acima).

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 .