Empêcher les entrées négatives dans le formulaire type d'entrée= "Nombre"?

je veux restreindre l'entrée de l'utilisateur à des nombres positifs dans un format html.

je sais que vous pouvez définir min= "0", mais il est possible de contourner cela en entrant manuellement un nombre négatif.

Est-il un autre moyen de résoudre ce sans écrire une fonction de validation?

26
demandé sur Tiny Giant 2015-07-23 02:03:46

5 réponses

ceci utilise Javascript, mais vous n'avez pas à écrire votre propre routine de validation. Au lieu de cela il suffit de cocher l' validity.valid propriété. Ce sera vrai si et seulement si l'entrée se situe dans la plage.

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
51
répondu Mikel Rychliski 2015-07-22 23:54:57

ceci n'est pas possible sans valider la valeur de l'entrée.

type d'entrée=Nombre

l'élément d'entrée avec un attribut de type dont la valeur est "nombre" représente un contrôle précis pour définir la valeur de l'élément à un chaîne représentant un nombre.

Puisqu'il s'agit d'une chaîne représentant le nombre, il n'y a aucun moyen de s'assurer que la chaîne représente des valeurs numériques ou pas.

les attributs autorisés ne vous donneront pas la capacité de valider la valeur du contrôle d'entrée de nombre.

Une façon de faire cela avec l'aide de JavaScript pourrait ressembler à ceci.

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

si vous prévoyez d'envoyer vos données à un serveur, Assurez-vous de valider les données sur le serveur. Côté Client JavaScript ne peut pas s'assurer que les données qui sont envoyées seront ce que vous attendez qu'elles soient.

26
répondu DavidDomain 2015-07-28 07:39:10

If you want to ensure default value, i. valeur minimale, ou toute autre valeur, Cette solution fonctionne. Cela empêche également de vider le champ d'entrée. De la même façon que vous pouvez définir sa valeur max.

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">
3
répondu user7135197 2017-05-09 07:57:25

le script suivant ne permet que des nombres ou un espace de retour à entrer dans la saisie.

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

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">
1
répondu Tiny Giant 2015-07-27 22:13:36

type="number" déjà résout permettant uniquement des chiffres à taper comme d'autres réponses ici.

juste pour référence: avec jQuery vous pouvez écraser les valeurs négatives sur la mise au point avec le code suivant:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

ceci ne remplace pas la validation côté serveur!

1
répondu Hafenkranich 2016-10-03 17:50:56