web-dev-qa-db-ja.com

Javascript-検証、数字のみ

数字のみが入力された場合にのみ検証するためにログインフォームを取得しようとしています。入力が数字のみの場合は動作しますが、数字の後に文字を入力すると、検証などが行われます。12akfは動作します。午前1時が機能します。どうすればこれを乗り越えることができますか？

ログインの一部

<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
28
Anthony Do

/^\d+$/に一致します。 $は「行末」を意味するため、最初の数字の実行後に数字以外の文字があると、一致が失敗します。

編集：

RobGは、より簡潔な/\D/.test(z)を賢明に提案しています。この操作は、必要なものの逆をテストします。入力にany数字以外の文字がある場合、trueを返します。

否定の!を省略し、if(/\D/.test(z))を使用します。

34
apsillers

これは、123123123.41212313のような数字を受け入れる数字のみを受け入れるように入力を検証する方法です

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

これはドット（。）の入力を受け入れないため、整数のみを受け入れます

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

この方法では、数字以外の入力をユーザーに許可しません

20
Max

これは私のために働いた：

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)")
  }

}
8
kubio

遅い答えですが、これは誰かを助けるかもしれません

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

使用は次のようになります

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

ans=isNumber(nn);

if(ans)
{
    //only numbers
}

このANSは、ここから大きな投票で発見されました

JavaScriptで数値を検証する-IsNumeric（）

4
AtanuCSE

正規表現は素晴らしいのですが、それを使って何かをしようとする前に、それが数字であることを確認してみませんか？

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

最も簡単なソリューション。

この答えをくれたパートナーに感謝します。

onkeypressイベントをinputテキストボックスに次のように設定できます。

onkeypress="validate(event)"

そして、次のような正規表現を使用します。

function validate(evt){
     evt.value = evt.value.replace(/[^0-9]/g,"");
}

フィールド内の数字とは異なる文字や記号をスキャンして削除します。

2
Analyst

私たちは、ショットコードが以下の回答を参照するたびに追加する長い構造プログラミングを受け入れないと思います。

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
1
pawan sen

数字の入力制限に長いコードは必要ありません。このコードを試してください。

また、有効なintとfloatの両方の値を受け入れます。

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 />

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 />

上記の回答は、最も一般的なユースケース-入力を数値として検証するためのものです。

しかし、負の数などの特別なケースを許可し、それを削除する前に無効なキーストロークをユーザーに示すため、そのような特別なユースケースのコードスニペットを以下に示します。

$(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;
}
}

この関数は、テキストフィールドに数字のみを許可します。

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

すでにあるフォームを使用する：

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);
}

これにより、キーが放された後、数字以外のすべてが削除されます。

0
coffee_addict

//完璧に動作するこのjqueryを使用し、数字のみである必要があるテキストボックスにクラスnosonlyを追加するだけです：

$(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