Home / Questions / 493037
Accepted
Popularfan
Asked: 2022-03-27 02:23:24 +0800 CST 2022-03-27 02:23:24 +0800 CST

Range of numbers with type="text" and pattern?

  • 772

I have the following validation:

An input where we control with a pattern that there are only 4 figures including the possibility that the figure has 0 on the left.

<input type="text" required title="Debe tener 4 digitos." pattern="\d{4}" minlength="4" maxlength="4" />

But I also need to control through pattern that this figure is within a range between 0100 and 4599 including these 2 numbers.

javascript

1 Answers

  1. Best Answer

    I personally find maintaining complex regex expensive and prefer to use them sparingly, but in this case you could do something like

    <form>
  <input type="text" required title="Debe tener 4 digitos." 
      pattern="(0[1-9]\d{2})|([1-3]\d{3})|(4[0-5]\d{2}))"
      minlength="4" maxlength="4" />
  <button>Submit</button>
</form>

    Explanation

    (0[1-9]\d{2}) Un 0 seguido de un número entre 1 y 9 más dos dígitos más
             | o

([1-3]         Un dígito entre 1 y 3
      \d{3})   seguido de 3 dígitos cualesquiera
            |  o
(4             un 4,
  [0-5]        seguido de un número entre 0 y 5
               \d{2}) seguido de dos dígitos cualesquiera

    you can play with her here

    Another option is to create a separate check, converting the text to a number. It's more code but easier to maintain if the bounds change:

    const input = document.getElementById('my-input');

const validacion = generaValidacion(100,4599);
input.addEventListener('input', validacion);

function generaValidacion(MIN,MAX) {
  return () => {
    input.setCustomValidity('');
    if (input.checkValidity()) { //pasa las validaciones básicas
      console.log('Validando valor', input.value);
      if (+input.value <= MAX && +input.value >= MIN) {
        console.log('Válido', +input.value);
        return true;
      }
    }
    console.log('Inválido', input.value);
    input.setCustomValidity('Introduce un valor entre 0100 y 4599');
    return false;
  }
}
    <form>
  <label for="my-input"><input type="text" id="my-input" maxlength="4" minlength="4" pattern="\d{4}">
  <button>OK</button>
<form>

    • 2