3

Eu fiz uma validação no HTML usando pattern, tentei colocar letras e números ao mesmo tempo. Mais creio que não tem como determinar o mínimo de letra e números.

Exemplo: Só uma "letra" e "sete números" nessa sequência.

No primeiro momento fiz assim, verificação de número e letras (se for diferente disso volta um erro).

function check(inputvalue) {
    let teste = /^[0-9A-Za-z]+$/;
    
    if(inputvalue.value.match(teste)) {
      alert("Sucess");
    } else {
      alert("Fail");
    }
  }
<input type="text" id="inputvalue">
<button onclick="check(inputvalue)">
 testando
</button>

1 Resposta 1

3

Claro que tem como determinar quantidades específicas.

Se quer uma letra seguida de 7 números, basta trocar a regex para:

/^[A-Za-z][0-9]{7}$/

Se quer definir a quantidade mínima e máxima, basta trocar o quantificador. Por exemplo, {2,7} para no mínimo 2 e no máximo 7. Ou ainda {2,} para no mínimo 2, sem limite máximo.


Outro detalhe é que o método match retorna um array contendo várias informações, como o trecho que foi encontrado, grupos de captura, etc. Mas se você não precisa dessas informações e só quer saber se a string corresponde à regex (ou seja, apenas "sim ou não"), pode usar o método test, que retorna simplesmente true ou false:

let regex = /^[A-Za-z][0-9]{7}$/;
if (regex.test(inputvalue.value)) {
    // sucesso
} else {
    // falha
}

E esta regex pode ser usada no atributo pattern sem problemas:

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

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

campo.addEventListener('invalid', () => {
    campo.setCustomValidity('O campo deve ter uma letra seguida de 7 dígitos');
});
/* deixar borda vermelha enquanto o campo for inválido */
input:invalid {
  border: red 1px solid;
}
<form>
  <input id="campo" type="text" pattern="^[A-Za-z][0-9]{7}$" required />
  <input type="submit" value="ok">
</form>

1
  • 1
    Cara, desculpa pela mega demora! Maaas tudo ocorreu bem, deu certinho sim ( agradeço pela sua explicação ) Commented 8/07/2020 às 13:29

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 .