2

私の要件は、IP範囲を検証することです。数値のみを受け入れるJavaScript関数を作成する必要があり、0〜255の範囲のみを許可する必要があります。それを超える値を入力すると、メッセージを警告する必要があります。

私は現在この以下の機能を使用しています

<script language="JavaScript"> 

function allownums(a) 
{ 

if(a <48 ||a > 57) 
alert("invalid") 
else 
alert("vaild") 
} 

</script> 
<input type='text' id='numonly' onkeypress='allownums(event.keycode)'>

私はJavaScriptを初めて使用します。要件を修正するには、専門家の提案が必要です。私に提案してください

ありがとうSudhir

4

8 に答える 8

2

現在、あなたはテストを受けています

(a < 48) || (a > 57)

無効な値の場合。だから私はそれらを変更します：

(a < 0 ) || (a > 255)

また、2.3 のような非整数入力で何をするかを検討する必要があるかもしれません - 丸めるか無効として扱うかのどちらかです。

現在、Kelvin Mackay が指摘しているように、入力値ではなく keypress イベントで検証を実行しているため、 onkeypress を に変更しallownums(this.value)ます。

アラートを div の警告に変更し、検証を使用して送信ボタンを有効/無効にすることをお勧めします。ポップアップはほぼすべての状況で非常に煩わしいためです。

(コメントで要求されたように) 無効なエントリが作成されたときに入力をクリアすると、ユーザーにとってかなり煩わしくなります。キーが押されて数字が追加され、入力が無効になるとすぐに、入力全体がクリアされます。ただし、コードは次のようになります。

if(!validnum(this.value)) 
    this.value="";

したがって、入力タグで：

<input type='text' id='numonly' 
      onkeyup='if(!validnum(this.value)) this.value="";'>

関数を次のように変更します。

function validnum(a) { 
    if(a < 0 || a > 255) 
        return false;
    else 
        return true;
}

またはより簡潔に：

function validnum(a) {
    return ((a >= 0) && (a <= 255));
}

編集：必要に応じて、ボックスを警告してクリアするには：

function validOrPunchTheUser(inputElement) {
    if(!validnum(inputElement.value)) {
        window.alert('badness'); // punch the user
        inputElement.value = ""; // take away their things
    }
}

<input type='text' id='numonly' 
      onkeyup='validOrPunchTheUser(this)'>

ただし、他の回答を読むと、明らかにオクテットを検証しようとしています（たとえば、IPアドレスで）。もしそうなら、それは今日私を通り過ぎたので、質問でそれを述べてください. オクテットの場合:

function validateIPKeyPress(event) {
    var key = event.keyCode;
    var currentvalue = event.target.value;
    if(key < 96 || key > 105)
    {
        event.preventDefault();
        window.alert('pain');
        return false;
    }
    else if(currentvalue.length > 2 ||
            (currentvalue.length == 2 &&
             key > 101)) {
        window.alert('of death');
        event.preventDefault();
        event.target.value = event.target.value.substring(0,2);
    }
    else
        return true;
}

入力タグを使用:

<input type='text' id='octet'
          onkeydown='validateIPKeyPress(event)'>

ただし、アラートは使用しないでください。アラート行を削除すると、無効な入力がサイレントに防止されます。onkeydown を使用するように変更したことに注意してください。これにより、無効なキーの押下を検出して、値がまったく変更されないようにすることができます。入力をクリアする必要がある場合は、 を実行しますif(!validateIPKeyPress(event)) this.value = "";。

于 2012-11-16T09:03:44.103 に答える
1

IPアドレス全体の検証のためにすぐに行きたいと思います。数値とドットの両方の入力を許可し、REGEX パターンを介してそれらを解析します。

ここで取得できるパターンの使用例: http://www.darian-brown.com/validate-ip-addresses-javascript-and-php-example/

コード自体は次のようになります。

<input type='text' id='numonly' value="" onkeypress='allowIp(event)' onkeyup='javascript:checkIp()'>

function allowIp(e){
if((e.keyCode < 48 || e.keyCode > 57) && e.keyCode != 46)  // both nubmer range and period allowed, otherwise prevent.
  { 
      e.preventDefault();
  }
}

function checkIp() 
{ 
  var ip = $("#numonly").val();

    /* The regular expression pattern */
  var pattern = new RegExp("^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");

  /* use  javascript's test() function to execute the regular expression and then store the result - which is either true or false */
  var bValidIP = pattern.test(ip);

  if(bValidIP){
     // IP has ok pattern
     $("#numonly").css("background", "green");
  }
  else {
     $("#numonly").css("background", "red");
  }
}

ここでフィドルで確認できます http://jsfiddle.net/Indias/P3Uwg/

于 2012-11-16T09:41:30.147 に答える
1

単一の整数

次のソリューションを使用して、単一の整数に対するユーザー入力が 0 から 255 の間であるかどうかを確認できます。

document.getElementById('example').addEventListener('input', event => {
  const input = event.target.value;
  console.log(/^\d+$/.test(input) && input > -1 && input < 256);
});
<input id="example" type="text" placeholder="Enter single integer" />

IPアドレス

または、次のコードを使用して、IP アドレスの各セクションが0 ～ 255であることを確認できます。

document.getElementById('example').addEventListener('input', event => {
  const input = event.target.value;
  console.log(input === new Uint8ClampedArray(input.split('.')).join('.'));
});
<input id="example" type="text" placeholder="Enter IP address" />

于 2018-09-19T02:55:32.563 に答える
0

最後に押されたキーではなく、入力の現在の値を検証する必要があります。

<input type='text' id='numonly' onkeypress='allownums(this.value)'>

次に、関数を次のように変更するだけです。if(a < 0 || a > 255)

于 2012-11-16T09:03:52.700 に答える
0

このような関数はそれを行うべきです:

function allownums(value){
   var num = parseInt(value,10);
   if(num <0 || num>255)
      alert('invalid')      
}

次に、html を次のようにします。

<input type='text' id='numonly' onblur='allownums(this.value)'>

実際の例: http://jsfiddle.net/USL3E/

于 2012-11-16T09:05:50.507 に答える
0

更新いくつかの基本的な IP フォーマットを実行し、天気をチェックしたり、すべての入力が範囲 (0 ～ 255) 内にないことなどを確認するフィドル
を セットアップしました。自由に使用し、改善し、研究してください。フィドルと一致するように、ここのコード スニペットも更新しました

あなたが考慮していないことがいくつかあります。何よりもまず、すべてのブラウザがkeycodeイベント オブジェクトに設定されたプロパティを持っているわけではありません。イベント オブジェクト全体を関数に渡し、そこで X ブラウザーの問題に対処する方がよいでしょう。
第二に、キーを次々とチェックしていますが、入力フィールドが取得している実際の値をチェックしているわけではありません。html 属性の使用 (使用されるのはあまり好きではありません) や未定義の戻り値など、他にもいくつかありますが、onkeypressそれでは少し行き過ぎてしまいます... これが私が提案するものです - HTML:

<input type='text' id='numonly' onkeypress='allowNums(event)'>

JS:

function allowNums(e)
{
    var key = e.keycode || e.which;//X-browser
    var allow = '.0123456789';//string the allowed chars:
    var matches,element = e.target || e.srcElement;
    if (String.fromCharCode(key).length === 0)
    {
        return e;
    }
    if (allow.indexOf(String.fromCharCode(key)) === 0)
    {//dot
        element.value = element.value.replace(/[0-9]+$/,function(group)
        {
            return ('000' + group).substr(-3);
        });
        return e;
    }
    if (allow.indexOf(String.fromCharCode(key)) > -1)
    {
        matches = (element.value.replace(/\./g) + String.fromCharCode(key)).match(/[0-9]{1,3}/g);
        if (+(matches[matches.length -1]) <= 255)
        {
            element.value = matches.join('.');
        }
    }
    e.returnValue = false;
    e.cancelBubble = true;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
}​

さて、このコードにはまだ多くの作業が必要です。これは、作業を開始するためのものであり、イベント オブジェクト、JS イベント ハンドラーの動作、およびその他すべてを調べることをお勧めします。ところで、JS は初めてなので、このサイトはブックマークする価値があります

于 2012-11-16T09:35:43.810 に答える