web-dev-qa-db-fra.com

Javascript - validation, chiffres uniquement

J'essaie de valider mon formulaire de connexion uniquement si des chiffres ont été saisis. Je peux le faire fonctionner si l’entrée n’est que des chiffres, mais quand je tape des caractères après un nombre, cela valide encore, etc. 12akf fonctionnera. 1h du matin travaillera. Comment puis-je aller au-delà de cela?

Une partie de la connexion

<form name="myForm">
    <label for="firstname">Age: </label>
    <input name="num" type="text" id="username" size="1">
    <input type="submit" value="Login" onclick="return validateForm()">

function validateForm()
{

    var z = document.forms["myForm"]["num"].value;
    if(!z.match(/^\d+/))
        {
        alert("Please only enter numeric characters only for your Age! (Allowed input:0-9)")
        }
}
javascriptvalidationnumbers
25
Anthony Do

Match contre /^\d+$/. $ signifie "fin de ligne", donc tout caractère non numérique après la série initiale de chiffres fera échouer la correspondance.

Modifier:

RobG suggère judicieusement le plus succinct /\D/.test(z). Cette opération teste l'inverse de ce que vous voulez. Il retourne true si l'entrée contient des caractères non numériques.

Oubliez simplement le ! négatif et utilisez if(/\D/.test(z)).

29
apsillers

voici comment valider l’entrée pour n’accepter que des nombres cela acceptera des nombres comme 123123123.41212313

<input type="text" 
onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;"
/>

et cela n'acceptera pas d'entrer le point (.), donc il n'acceptera que les entiers

<input type="text" 
onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
/>

de cette façon, vous ne laisserez pas l'utilisateur entrer autre chose que des chiffres. 

20
Max

Celui-ci a fonctionné pour moi:

function validateForm(){

  var z = document.forms["myForm"]["num"].value;

  if(!/^[0-9]+$/.test(z)){
    alert("Please only enter numeric characters only for your Age! (Allowed input:0-9)")
  }

}
6
kubio

Réponse tardive, mais peut-être que cela aidera quelqu'un

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

Utiliser sera comme

nn=document.forms["myForm"]["num"].value;

ans=isNumber(nn);

if(ans)
{
    //only numbers
}

Ce ans a été trouvé d'ici avec un vote énorme

Valider les nombres en JavaScript - IsNumeric ()

4
AtanuCSE

Les expressions régulières sont excellentes, mais pourquoi ne pas simplement s'assurer que c'est un nombre avant d'essayer de faire quelque chose avec?

function addemup() {
var n1 = document.getElementById("num1");
var n2 = document.getElementById("num2");
sum = Number(n1.value) + Number(n2.value);
    if(Number(sum)) {
        alert(sum);
        } else {
            alert("Numbers only, please!");
        };
    };
2
J. Manis

Nul besoin du code long pour la restriction de saisie de numéro, essayez simplement ce code.

Il accepte également les valeurs valides int et float.

Approche Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

approche jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Les réponses ci-dessus sont pour la plupart des cas d'utilisation courants - validation de l'entrée sous forme de nombre.

Mais pour permettre quelques cas spéciaux comme nombres négatifs et affichage des frappes de touche non valides à l'utilisateur avant Si vous le supprimez, voici l'extrait de code correspondant à de tels cas d'utilisation.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

1
vinayakj
function ValidateNumberOnly()
{
if ((event.keyCode < 48 || event.keyCode > 57)) 
{
   event.returnValue = false;
}
}

cette fonction n'autorise que les nombres dans le champ de texte.

1
KanimozhiPalanisamy
var elem = document.getElementsByClassName("number-validation"); //use the CLASS in your input field.
for (i = 0; i < elem.length; i++) {
   elem[i].addEventListener('keypress', function(event){
      var keys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0];
      var validIndex = keys.indexOf(event.charCode);
      if(validIndex == -1){
         event.preventDefault();
      }
  });
}
1
Sudip Debnath

En utilisant le formulaire que vous avez déjà:

var input = document.querySelector('form[name=myForm] #username');

input.onkeyup = function() {
    var patterns = /[^0-9]/g;
    var caretPos = this.selectionStart;

    this.value = input.value.replace(patterns, '');
    this.setSelectionRange(caretPos, caretPos);
}

Cela effacera tous les chiffres non numériques une fois la touche relâchée.

0
coffee_addict

// J'utilise ce script qui fonctionne parfaitement, il suffit d'ajouter la classe nosonly à n'importe quelle zone de texte qui ne devrait contenir que des chiffres:

$(document).ready(function () {
       $(".nosonly").keydown(function (event) {
           // Allow only backspace and delete
           if (event.keyCode == 46 || event.keyCode == 8) {
               // let it happen, don't do anything
           }
           else {
               // Ensure that it is a number and stop the keypress
               if (event.keyCode < 48 || event.keyCode > 57) {
              alert("Only Numbers Allowed"),event.preventDefault();
               }
           }
       });
   });
0
Antonio Perez