14

Necesito comprobar el contenido de un <input> en el que sólo se pueden introducir números enteros mayores que 0 (del 1 a X). ¿Cómo puedo indicarlo en el atributo pattern? ¿O se debería comprobar con un script?

9 respuestas 9

11

Hay 2 cosas que pueden importarte. Y dependiendo de eso será la solución.

  • Si te importa que HTML valide tus campos antes de enviar un formulario

Con lo que todos te dijeron basta y sobra:

<input id="numero" type="number" min="1" pattern="^[0-9]+">
  • Si te importa que el usuario difícilmente pueda ver un caracter que no se permite en el campo

Entonces no te queda otra opción que utilizar un script.
Hay algunos más sencillos, pero el siguiente que pongo ya puede ser clasificado como rebuscado.

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]+">


Para agregar otro campo, puedes instanciar otro objecto CampoNumerico pasándole algún selector válido.

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

Nota: Agregué una línea de código para que se pueda borrar con la tecla suprimir también.


De todas maneras, como dijo @Francisco Romero, las validaciones no deben quedar solo del lado del cliente. Son fáciles de saltar.
Para este caso, con solo prevenir la ejecución del script, e inspeccionar el campo para remover el pattern, el usuario ya podrá enviar lo que quiera al servidor.


Agrego una solución más sencilla, y más agradable para quienes usan javascript de manera clásica. Sin embargo, hay algunas diferencias con respecto a la solución anterior.

Diferencias con la anterior - No permite pegar pegar valores aceptables en el campo. - No permite arrastrar números válidos dentro de él. - Acepta que el campo pueda borrarse completamente. (En ambas soluciones, este comportamiento se puede cambiar si se requiere).

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>

Por último, si se quiere usar esta última solución para varios campos, recomendaría usarlo con delegación de eventos.

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>

4
  • 1
    Sinceramente pero desde mi punto de vista el Script que ha propuesto se puede simplificar muchísimo más y es completamente innecesario hacerlo así de largo.
    – lromeraj
    Commented el 8 ago. 2017 a las 11:06
  • Ahí agregué una solución simplificada y reducida. Sin embargo, el largo de las variables lo mantuve para que se entienda un poco más rápido qué es lo que hace el código en caso de querer cambiar algo. Además, que antes de enviar código javascript al cliente, todo esto normalmente se minificaría.
    – Francute
    Commented el 8 ago. 2017 a las 12:24
  • no me refería al largo del nombre de las variables eso es lo de menos, yo hablo de que a pesar de eso sobra y mucho.
    – lromeraj
    Commented el 8 ago. 2017 a las 13:00
  • Bueno, en la simplificación, son solo variables y básicamente un único if.
    – Francute
    Commented el 8 ago. 2017 a las 14:53
9

EL patrón lo puedes asignar directamente en el HTML, el cual solo escribirá números.

Tambien está el input numérico que solo acepta números.

Y siendo números le puedes asignar un valor mínimo al estos inputs.

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

2
  • Si por ejemplo introduzco -15 desde el teclado puedo introducirlo. Commented el 7 ago. 2017 a las 19:22
  • Para tomarlo en tiempo real sí va ser necesario usar script.
    – farsSharp
    Commented el 7 ago. 2017 a las 19:27
9

Para usar el atributo pattern, seria pattern="[0-9]+"

8

En caso de que quisieras usar un pattern podrías utilizar pattern="^[0-9]+" para que al enviar el formulario te aparezca un error como que estás introduciendo un valor erróneo en el caso de que introduzcan un número negativo.

Además, si quieres prevenir que el usuario pueda introducir valores negativos de cualquier forma podrías usar min="1" para que desde el propio input solo pueda seleccionar valores mayores que uno.

Sin embargo, el paso anterior no impedirá que un usuario desde el teclado pueda introducir -15 por ejemplo, por lo que necesitarás de un script para controlar que nadie pueda introducir números negativos en tu input. Para ello he usado la función onkeypress y he indicado que si introducen un número negativo el número que se introduzca en el input sea 1.

IMPORTANTE: El hacer una validación en el lado del cliente mediante Javascript no es suficiente ya que este tipo de validaciones se pueden manipular. Deberías controlarlo también desde el lado del servidor para mayor seguridad en tu plataforma.

Ejemplo:

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]+">

7

Con html5 puedes marcarlo directamente en el input.

Ejemplo: números enteros del 0 al 1000, escala de una en una unidad:

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

Más información aqui.

4

Lo puedes hacer con ^[1-9]\d*$.

Te obliga a introducir solamente números positivos mayores que cero. La validación se hace sin necesidad de scripts.

Ejemplo:

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

3

Podrías usar dos formas distintas:

  • Input Type Number

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

    Atributo min: Especifica el valor mínimo de un campo de entrada
    Atributo max: Especifica el valor máximo de un campo de entrada
    Atributo step: especifica los intervalos de número legales para un campo de entrada.

  • El atributo pattern

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

Ejemplo Input Type Number:

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

Ejemplo atributo 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>

2

Yo le agregue un min de "0" y cree una funcion en Js para validar:

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

Y esta es mi función:

function validarNumero(value) {
   var valor = $(value).val();
    if (!isNaN(valor) && valor >= 0){
      $(value).val(valor);
    }else{
      $(value).val(0);
    }
}
1
  • Esta respuesta me funciono solo cambie a if (!isNaN(valor) && valor >= 1) y la otra else a $(value).val(""); para que solo acepte número de +1 en adelante y si no, deje el campo vacío
    – Minor
    Commented el 15 dic. 2021 a las 19:29
1

Otra forma más simplificada de hacerlo es recibir el evento del campo y verificar si la tecla que hemos presionado es -. Si esto cumple, evitamos el evento por defecto con preventDefault():

function evitarNegativo(e) {
  if (e.key === "-")
    e.preventDefault();
}
<input type="number" onkeydown="evitarNegativo(event)" onpaste="return false;" onDrop="return false;" autocomplete="off">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.