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

谢谢苏迪尔

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 浏览器问题。
其次，您正在检查一个又一个键，但在任何时候您都没有检查输入字段获得的实际值。还有一些事情，比如使用onkeypresshtml 属性（我真的不喜欢看到使用），以及未定义的返回值，但这会让我们走得太远......这就是我的建议 - 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 回答
0 
    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>
于 2013-09-20T09:04:52.947 回答
0

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

  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情况，您甚至不需要它，因为负号(-)将被自动阻止，因为符号本身不是 integer。

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

于 2020-08-11T12:34:31.187 回答