Home / Questions / 93416
Accepted
gmarsi
Asked: 2020-08-08 11:07:02 +0800 CST 2020-08-08 11:07:02 +0800 CST

Как разрешить только положительные значения в <input>?

  • 772

Мне нужно проверить содержимое a, <input>в которое можно вводить только целые числа больше 0 (от 1 до X). Как я могу указать это в атрибуте pattern? Или надо скриптом проверять?

javascript

8 Answers

  1. Best Answer

    Есть 2 вещи, которые могут иметь для вас значение. И в зависимости от этого будет решение.

    • Если вы заботитесь о HTML-проверке ваших полей перед отправкой формы

    С тем, что все сказали вам достаточно и более чем достаточно:

    <input id="numero" type="number" min="1" pattern="^[0-9]+">
    • Если вы заботитесь о том, чтобы пользователь едва мог видеть символ, который не разрешен в поле

    Тогда у вас нет другого выбора, кроме как использовать сценарий.
    Есть и попроще, но следующий, который я поставил, уже можно отнести к разряду надуманных.

    class CampoNumerico {

  constructor(selector) {
    this.nodo = document.querySelector(selector);
    this.valor = '';
    
    this.empezarAEscucharEventos();
  }
  
  empezarAEscucharEventos() {
    this.nodo.addEventListener('keydown', function(evento) {
      const teclaPresionada = evento.key;
      const teclaPresionadaEsUnNumero =
        Number.isInteger(parseInt(teclaPresionada));

      const sePresionoUnaTeclaNoAdmitida = 
        teclaPresionada != 'ArrowDown' &&
        teclaPresionada != 'ArrowUp' &&
        teclaPresionada != 'ArrowLeft' &&
        teclaPresionada != 'ArrowRight' &&
        teclaPresionada != 'Backspace' &&
        teclaPresionada != 'Delete' &&
        teclaPresionada != 'Enter' &&
        !teclaPresionadaEsUnNumero;
      const comienzaPorCero = 
        this.nodo.value.length === 0 &&
        teclaPresionada == 0;

      if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
        evento.preventDefault(); 
      } else if (teclaPresionadaEsUnNumero) {
        this.valor += String(teclaPresionada);
      }

    }.bind(this));

    this.nodo.addEventListener('input', function(evento) {
      const cumpleFormatoEsperado = new RegExp(/^[0-9]+/).test(this.nodo.value);

      if (!cumpleFormatoEsperado) {
        this.nodo.value = this.valor;
      } else {
        this.valor = this.nodo.value;
      }
    }.bind(this));
  }

}

new CampoNumerico('#numero');
    <input id="numero" type="number" min="1" pattern="^[0-9]+">

    Чтобы добавить еще одно поле, вы можете создать экземпляр другого объекта NumberField, передав ему какой-нибудь допустимый селектор.

    new CampoNumerico('#otro-campo-a-validar');

    Примечание . Я добавил строку кода, чтобы ее также можно было удалить с помощью клавиши удаления.

    В любом случае, как сказал @Francisco Romero, проверки не следует оставлять только на стороне клиента. Они легко прыгают.
    В этом случае, просто предотвратив выполнение скрипта и проверив поле для удаления шаблона, пользователь сможет отправить на сервер все, что захочет.

    Добавляю более простое решение, и более приятное для тех, кто использует javascript классическим способом. Однако есть некоторые отличия от предыдущего решения.

    Отличия от предыдущего - Не позволяет вставлять допустимые значения в поле. - Не позволяет перетаскивать в него действительные числа. - Принять, что поле может быть полностью удалено. (В обоих решениях это поведение можно изменить при необходимости.)

    const campoNumerico = document.getElementById('campo-numerico');

campoNumerico.addEventListener('keydown', function(evento) {
  const teclaPresionada = evento.key;
  const teclaPresionadaEsUnNumero =
    Number.isInteger(parseInt(teclaPresionada));

  const sePresionoUnaTeclaNoAdmitida = 
    teclaPresionada != 'ArrowDown' &&
    teclaPresionada != 'ArrowUp' &&
    teclaPresionada != 'ArrowLeft' &&
    teclaPresionada != 'ArrowRight' &&
    teclaPresionada != 'Backspace' &&
    teclaPresionada != 'Delete' &&
    teclaPresionada != 'Enter' &&
    !teclaPresionadaEsUnNumero;
  const comienzaPorCero = 
    campoNumerico.value.length === 0 &&
    teclaPresionada == 0;

  if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
    evento.preventDefault(); 
  }

});
    <input id="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>

    Наконец, если вы хотите использовать это последнее решение для нескольких полей, я бы рекомендовал использовать его с делегированием событий.

    const contenedor = document.getElementById('contenedor-campos');

contenedor.addEventListener('keydown', function(evento) {
  const elemento = evento.target;
  if (elemento.className === 'campo-numerico') {
    const teclaPresionada = evento.key;
    const teclaPresionadaEsUnNumero =
      Number.isInteger(parseInt(teclaPresionada));

    const sePresionoUnaTeclaNoAdmitida = 
      teclaPresionada != 'ArrowDown' &&
      teclaPresionada != 'ArrowUp' &&
      teclaPresionada != 'ArrowLeft' &&
      teclaPresionada != 'ArrowRight' &&
      teclaPresionada != 'Backspace' &&
      teclaPresionada != 'Delete' &&
      teclaPresionada != 'Enter' &&
      !teclaPresionadaEsUnNumero;
    const comienzaPorCero = 
      elemento.value.length === 0 &&
      teclaPresionada == 0;

    if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
      evento.preventDefault(); 
    }
  }
});
    <div id = "contenedor-campos">
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
</div>

    • 10

  2. Чтобы использовать атрибут шаблона , было бы pattern="[0-9]+"

    • 9

  3. Вы можете назначить шаблон прямо в HTML, который будет писать только цифры.

    Существует также числовой ввод, который принимает только числа.

    И, будучи числами, вы можете присвоить этим входам минимальное значение.

        <input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
    
    <input type="number" min="0">

    • 8

  4. Если вы хотите использовать a pattern, вы можете использовать pattern="^[0-9]+"так, чтобы при отправке формы появлялась ошибка, как будто вы вводите неправильное значение, если вводите отрицательное число.

    Кроме того, если вы хотите, чтобы пользователь не мог вводить отрицательные значения любым способом, который вы могли бы использовать min="1", чтобы из своих собственных inputон мог выбирать только значения больше единицы.

    Однако предыдущий шаг не помешает пользователю ввести с клавиатуры, например, -15, поэтому вам понадобится скрипт, чтобы контролировать, что никто не может вводить отрицательные числа в ваш input. Для этого я использовал функцию onkeypress, и я указал, что если они вводят отрицательное число, число, которое вводится в inputнее, равно 1.

    ВАЖНО: Выполнение проверки на стороне клиента с помощью Javascriptнедостаточно, поскольку этим типом проверки можно манипулировать. Вы также должны контролировать его со стороны сервера для большей безопасности на вашей платформе.

    Пример:

    var numero = document.getElementById('numero');

function comprueba(valor){
  if(valor.value < 0){
    valor.value = 1;
  }
}
    <input id="numero" type="number" onkeypress="comprueba(this)" min="1" pattern="^[0-9]+">

    • 8

  5. С html5 вы можете пометить его прямо во вводе.

    Пример: целые числа от 0 до 1000, масштаб единицы в единице:

    <input type="number" min="0" max="1000" step="1" name="num">

    Больше информации здесь .

    • 7

  6. Вы можете сделать это с помощью ^[1-9]\d*$.

    Заставляет вас вводить только положительные числа больше нуля. Проверка выполняется без использования скриптов.

    Пример:

    <form>
    <input type="text" pattern="^[1-9]\d*$"/>
    <input type="submit" />
</form>

    • 4

  7. Вы можете использовать два разных способа:



    • <input type="number" name="points" min="1" max="9" step="1">

      Атрибут числа типа вводаmin : задает минимальное значение поля ввода .
      Атрибут max : задает максимальное значение поля ввода .
      Атрибут step : задает допустимые диапазоны чисел для поля ввода.

    • Атрибут шаблона

      <input type="text" pattern="[0-9]{1}" title="Formato: 1 digito" />
      <input type="text" pattern="[0-9]{3}" title="Formato: 3 dígitos" /> , т.е. 001и т.д.

    Пример типа ввода Number:

    <form>
  <input type="number" name="points" min="1" max="9" step="1" />
  <input type="submit" />
</form>

    Пример атрибута pattern:

    <form>
  <input type="text" pattern="[0-9]{1}" title="Formato: 1 digito" />
  <input type="text" pattern="[0-9]{3}" title="Formato: 3 dígitos" />
  <input type="submit" />
</form>

    • 3

  8. Я добавил мин "0" и создал функцию в Js для проверки:

    <input type="number" min="0" onkeyup="validarNumero(this)" />

    И это моя функция:

    function validarNumero(value) {
   var valor = $(value).val();
    if (!isNaN(valor) && valor >= 0){
      $(value).val(valor);
    }else{
      $(value).val(0);
    }
}
    • 2