1

Eu gostaria de utilizar um pattern no meu input (tem que ser do tipo text) com as seguintes regras:

  • O input só aceita até 4 caracteres.
  • Esses caracteres só podem ser números de 0 à 9.
  • O usuário NÃO pode começar digitando 0. Ex:
    • 0100, 0001, 0050 (Não pode)
    • 1020, 1000 (Pode).

Comecei fazendo o seguinte código abaixo, mas não está dando muito certo.

<input class="form-control" type="text" id="cod" name="cod" pattern="[0-9]+$" maxlength="4" placeholder="Digite o código da empresa(Somente números)" required autofocus />

Porém não deu muito certo. (Nesse caso do meu código, não consegui nem impedir que o campo receba só números).

OBS: Gostaria de utilizar só o pattern do input, sem JavaScript ou jQuery.

3 Respostas 3

3

Você pode usar o pattern igual a ^[1-9][0-9]{0,3}$:

/* deixar borda vermelha enquanto o campo for inválido */
input:invalid {
  border: red 1px solid;
}
<form>
  <input type="text" pattern="^[1-9][0-9]{0,3}$" maxlength="4" placeholder="Digite o código da empresa(Somente números)" required />
  <input type="submit" value="ok">
</form>

Os marcadores ^ e $ são respectivamente o início e fim da string. Assim você garante que o campo só terá o que estiver especificado na regex.

Em seguida temos a classe de caracteres [1-9], que corresponde a um dígito de 1 a 9. Isso garante que o primeiro dígito não pode ser zero.

Depois temos [0-9]{0,3}: de zero a três dígitos de 0 a 9.

Ou seja, o campo pode ter de 1 a 4 dígitos, e o primeiro não pode ser zero. Com isso, o campo não aceita valores como 0100 e 0999, mas aceita 1010, 2999, 1, 12, 999 etc. Veja aqui alguns exemplos desta regex em funcionamento.


Lembrando que o atributo pattern não vai impedir que o usuário digite informações inválidas. Ou seja, o usuário pode digitar "abcd", e o pattern será usado para verificar se o que foi digitado corresponde à regex (e se estiver, o formulário pode ser submetido).

2
  • Se eu quiser que aceite de 1 à 4 caracteres é só tirar aquele {3} ? Ai aceitaria o número '999' e não aceitaria o '012' ? (No caso, eu gostaria que o usuário pudesse digitar de "1 à 4" números. Não somente "4" caracteres). Commented 30/05/2019 às 22:58
  • @ThiagoPetherson Atualizei a resposta
    – hkotsubo
    Commented 30/05/2019 às 23:08
1

DEFINIÇÃO DE USO

O atributo pattern especifica uma expressão regular em que o valor do elemento <input> é verificado no envio do formulário.

DICA

Use o atributo de título global para descrever o padrão para ajudar o usuário.

NOTA

O atributo padrão funciona com os seguintes tipos de entrada: texto, data, pesquisa, url, tel, email e password. Saiba mais sobre expressões regulares no nosso tutorial de JavaScript.

SINTAXE

<input pattern="regexp">

ONDE regexp

Especifica uma expressão regular na qual o valor do elemento <input> é verificado.

Um exemplo onde, um elemento <input> com type = "password" que deve conter 6 ou mais caracteres:

<form action="/action_page.php">
    Password: 
    <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
    <input type="submit">
</form>

EXPRESSÃO REGULAR PARA O SEU CASO DE USO

1) [0-9]{4} :Onde pega dígitos de 0 a 9 e somente quatro deles

2) ^[0] :Onde pega o dígito zero correspondente do início da linha

Agora eu te deixo este site, para você testar as expressões regulares separadamente e conseguir entender o que está ocorrendo, te deixo também um desafio para você conseguir unir os mesmos, assim conseguindo a sua regras de negócio do seu caso de uso.

FONTE ORIGINAL - W3SCHOOLS

5
  • Sim, Thiagão. Eu agradeço a resposta. Porém, isso eu já conheço. O meu problema é criar uma expressão regular que cumpra os requisitos que eu citei na pergunta. Commented 30/05/2019 às 21:59
  • @ThiagoPetherson a sua pergunta o entendimento dela está levando para o caminho a qual eu dei a resposta, porém irei acrescentar há minha resposta o que você comentou. Aguarde um momento..
    – user148754
    Commented 30/05/2019 às 22:04
  • Mas dei uma bela de uma explicada na descrição da pergunta. Acho que ficou bem resumido ali. Commented 30/05/2019 às 22:05
  • @ThiagoPetherson tudo bem para você está resposta?
    – user148754
    Commented 30/05/2019 às 22:20
  • Foi boa sim, Thiago. Mas achei a do hkotsubo mais completa. Mas muito obrigado mesmo assim. Commented 30/05/2019 às 23:20
-1

Podes usar uma expressão regular igual a isso no teu formulário html pattern="^[1-9][0-9]{0,3}$" mas atenção isso não impedir que o teu input recebe letras.

1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 6/10/2022 às 15:09

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 .