不要让用户输入错误的数据 - 改进 IP 地址验证 JavaScript

Question

我正在尝试制作一个屏蔽输入字段来输入 IP 地址。我发现的几乎每个解决方案都有缺陷。

这里是我找到的最好的解决方案，但它仍然让我输入高于 255 的值。基本上它有效，但是当我尝试更改输入的地址时，我什至可以设置192.999.1.1

如何重现错误：

输入 IP 地址，例如192.168.1.1
Select某部分，比如192.__168__.1.1
开始输入数字，得到192。999.1.1

如何改进代码来解决这个问题？

这是我使用的代码

// Credits to @t_m27    
var options = {
  onKeyPress: function(text, event, currentField, options) {
    if (text) {
      var ipArray = text.split(".");
      var lastValue = ipArray[ipArray.length - 1];
      if (lastValue != "" && parseInt(lastValue) > 255) {
        ipArray[ipArray.length - 1] = '255';
        var resultingValue = ipArray.join(".");
        currentField.text(resultingValue).val(resultingValue);
      }
    }
  },
  translation: {
    'Z': {
      pattern: /[0-9]/,
      optional: true
    }
  }
};

$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="ipaddr" />

Answer 1

是这样的吗？

// Credits to @t_m27    
var options = {
  onKeyPress: function(text, event, currentField, options) {
    if (text) {
      var ipArray = text.split(".");
      ipArray = ipArray.map(num => num > 255 ? 255 : num)
      var resultingValue = ipArray.join(".");
      currentField.text(resultingValue).val(resultingValue);
    }
  },
  translation: {
    'Z': {
      pattern: /[0-9]/,
      optional: true
    }
  }
};

$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="ipaddr" />

Answer 2

如果你想使用一个函数 returns 如果它是一个有效的 ip，则为 true，否则为 false，你可以像这样使用它：

function isValidIp(ip) {
  return !ip.split('.').find(part => part > 255);
}

您可以使用它来显示消息或将输入标记为无效。

不要让用户输入错误的数据 - 改进 IP 地址验证 JavaScript

Don't let user to input wrong data - Improving IP address validation JavaScript

javascript

jquery

maskedinput