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

    有两件事对你很重要。取决于这将是解决方案。

    • 如果您关心 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

      <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" />ie001等。

    输入类型示例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