Question

我的要求是验证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

Answer 1

目前你有测试

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

表示无效值。所以我会改变那些：

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

您可能还需要考虑使用2.3之类的非整数输入做什么 - 将其舍入或将其视为无效。

目前，正如Kelvin Mackay指出的那样，您正在对按键事件而不是输入值执行验证，因此请将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 = "";。

Answer 2

我宁愿立即去验证整个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/

Answer 3

您需要验证输入的当前值，而不是按下的最后一个键：

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

您的功能只需要修改为：if(a < 0 || a > 255)

Answer 4

这样的功能应该这样做：

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/

Answer 5

更新
我已经设置a fiddle做一些基本的IP格式化并检查天气与否所有输入都在范围内（0 - 255）等...随意使用它，改进它，研究它...我还在这里更新了代码片段以匹配小提琴

有几件事你没有考虑到。首先，并非所有浏览器都在事件对象上设置了keycode属性。最好将整个事件对象传递给函数，并在那里处理X浏览器问题。
其次，您在按键后检查按键，但在任何时候都没有检查输入字段所获得的实际值。还有一些东西，比如使用onkeypress html属性（我真的不喜欢看），以及未定义的返回值，但这会让我们有点太远......这是我的建议 - 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的新手，this site is worth a bookmark

Answer 6

    function fun_key()
    {
    var key=event.keyCode;
    if(key>=48 && key<=57)
    {
    return true;
    }
    else
    {
    return false;
    alert("please enter only number");
    }
    }

    and you can call this function on keypress event like:
    <asp:textbox id="txtphonenumber" runat="server" onkeypress="return fun_key()">                </asp"textbox>

Answer 7

单整数

您可以使用以下解决方案来检查用户输入的单个整数是否在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" />

Answer 8

我看到许多答案都忽略了两个可能无法验证按键范围数字的重要因素：

当未选择输入文本框中的值时，实际结果应为(input.value * 10) + parseInt(e.key)，而不仅仅是input.value + parseInt(e.key)。它应该为* 10，因为在按键过程中您在后面再增加了一个数字，例如10成为109。
输入文本框中的值被选中时，您可以简单地检查是否Number.isInteger(parseInt(e.key))，因为选择了255时，按9不会变成{ {1}}，但改为2559。

因此，首先，编写一个简单的函数来检查用户是否选择了输入值：

接下来，这是您的按键事件处理程序，该事件处理程序考虑了以上两个因素：

function isTextSelected (input) {
    if (!input instanceof HTMLInputElement) {
        throw new Error("Invalid argument type: 'input'. Object type must be HTMLInputElement.");
    };
    return document.getSelection().toString() != "" && input === document.activeElement;
}

在另一括号中记下这种情况，它本身就是一个整体情况：

$("input[type='number']").on("keypress", function (e) { if (!Number.isInteger(parseInt(e.key)) || (($(this).val() * 10) + parseInt(e.key) > 255 && !isTextSelected($(this)[0]))) { e.preventDefault(); }; });

对于(($(this).val() * 10) + parseInt(e.key) > 255 && !isTextSelected($(this)[0]))条件，您甚至不需要在这里，因为负号< 0会自动阻止，因为负号本身不是不是整数。< / p>

已知问题：，但是，当用户将光标移动到(-)的开始位置并按{ {1}}，将成为29。这是因为已经超过1的{{1}}阻止了用户输入有效的129。当输入29 * 10 = 290时，开始位置特别难以跟踪。但这足以解决整数范围字段的正常输入方式。任何其他更好的解决方案都欢迎。

JavaScript只接受0到255范围之间的数字

8 个答案:

单整数

IP地址