Como adicionar mais de um comando regex em um pattern html5

[Naodeveissaber]

Tenho esses 4 regex

[0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}

[0-9]{1}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}

[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}

[0-9]{2}[.]{1}[0-9]{3}[-]{1}[0-9]{2}

Queria poder adiciona-los a um mesmo pattern html5 ex:

<input type="text" pattern="[0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{1}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{2}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" maxlength="10" title="Porfavor adicione apenas números">

Porém quando eu tento não funciona

[gbuenoo]

@Naodeveissaber

<input type="text" pattern="[0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{1}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" pattern="[0-9]{2}[.]{1}[0-9]{3}[-]{1}[0-9]{2}" maxlength="10" title="Porfavor adicione apenas números">

Você pode utilizar o operador OR " | ", conforme exemplo abaixo:

<input type="text" pattern="([0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{1}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{2}[.]{1}[0-9]{3}[-]{1}[0-9]{2})" title="Por favor adicione apenas números">

[Naodeveissaber]

Obrigado, vou testar

[Naodeveissaber]

@gbuenoo

([0-9]{2}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{1}[.]{1}[0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{3}[.]{1}[0-9]{3}[-]{1}[0-9]{2})|([0-9]{2}[.]{1}[0-9]{3}[-]{1}[0-9]{2})

Funcionou! Agradeço sua ajuda.

[hugokotsubo]

Você também pode simplificar a regex.

{1} significa “exatamente uma ocorrência” e por isso é desnecessário. [0-9]{1} e [0-9] são exatamente a mesma coisa. De forma geral, (qualquer coisa){1} é o mesmo que (qualquer coisa).

Quanto ao [0-9], pode trocar por \d, que são equivalentes.

Já o hífen não precisa estar entre [ ], e o ponto pode ser escrito como \. em vez de [.].

Quanto às expressões, repare que a diferença entre a primeira e a segunda é a quantidade de dígitos antes do primeiro ponto: pode ter um ou dois. Sendo assim, você pode usar \d{1,2} (o quantificador {1,2} significa “no mínimo 1, no máximo 2”). O mesmo vale para a terceira e quarta expressões, pode começar com 2 ou 3 dígitos, então poderia trocar por apenas \d{2,3}.

E o operador | tem menor prioridade, portanto os parênteses são desnecessários.

Ou seja, ficaria apenas \d{1,2}\.\d{3}\.\d{3}-\d{2}|\d{2,3}\.\d{3}-\d{2}:

<input type="text" pattern="\d{1,2}\.\d{3}\.\d{3}-\d{2}|\d{2,3}\.\d{3}-\d{2}" title="Por favor adicione apenas números">

Por fim, eu mudaria também o title, pois ele está dizendo para só digitar números, o que não é verdade, já que também pode digitar ponto e hífen em posições específicas. Seria melhor se a mensagem informasse os formatos corretos.

---

E na verdade dá para ir além. Reparou que todas as expressões terminam com “ponto, 3 dígitos, hífen, 2 dígitos”? O que varia é só o que vem antes, então poderia ser também:

(\d{1,2}\.\d{3}|\d{2,3})\.\d{3}-\d{2}

Agora precisa dos parênteses, para a primeira parte que varia. Dentro dos parênteses eu tenho “1 ou 2 dígitos, ponto, 3 dígitos; ou 2 ou 3 dígitos” e depois disso eu tenho o restante que é igual para todos (“ponto, 3 dígitos, hífen, 2 dígitos”).