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

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 新手，需要一些专家建议来解决我的要求。请给我建议

谢谢 苏迪尔

Answer 1

目前你有测试

(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 = "";。

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

您可以在 fiddle 上查看它 http://jsfiddle.net/Indias/P3Uwg/

Answer 3

单整数

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

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

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

你的函数只需修改为：if(a < 0 || a > 255)

Answer 5

这样的函数应该可以做到：

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 6

更新
我已经设置了a fiddle，它会进行一些基本的 IP 格式化并检查天气或并非所有输入都在范围内 (0 - 255) 等......随意使用它，改进它，研究它......我'我还更新了这里的代码 sn-p 以匹配小提琴

有几件事情你没有考虑到。首先，并非所有浏览器都在事件对象上设置了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 7

    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 8

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

1. 当输入文本框中的值未被选中时，真正的结果应该是(input.value * 10) + parseInt(e.key) 而不仅仅是input.value + parseInt(e.key)。它应该是* 10，因为您在按键期间在后面添加了一位数字，例如10 变为 109。
2. 当输入文本框中的值被选中时，您可以简单地检查是否Number.isInteger(parseInt(e.key))，因为当255被选中时，按9不会变成2559而是9。

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

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

接下来，这将是您的 on keypress 事件处理程序，它考虑了上述两个因素：

$("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 条件，这里甚至不需要它，因为负号(-) 将被自动阻止，因为符号本身不是整数。

KNOWN ISSUE： 但是，上述解决方案并不能解决用户将光标移动到29 的开始位置 并按下1 的情况，它将变为129。这是因为29 * 10 = 290已经超过255，阻止用户输入129，这是有效的。当输入type="number" 时，起始位置 尤其难以跟踪。但它应该足以解决整数范围字段的正常输入方式。欢迎任何其他更好的解决方案。