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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 3 年前。

Improve this question

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

这里https://stackoverflow.com/a/55837333是我找到的最好的解决方案，但它仍然允许我输入高于 255 的值。基本上它可以工作，但是当我尝试更改输入的地址时，我什至可以设置 192.999.1.1

如何重现错误:

1. 输入 IP 地址，例如192.168.1.1

2. 选择某些部分，例如 192.__168__.1.1

3. 开始输入数字，您会得到 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" />