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).
(/[^\d\+\(\)]/g, '')
[^\d]
na verdade pega qualquer coisa que não seja número (e já permite os caracteres(
,)
e+
, veja: regex101.com/r/AUKban/1)