时间戳

首页 > 解决方案 > 不要让用户输入错误的数据 - 改进 IP 地址验证 JavaScript

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

问题描述

我正在尝试制作一个带掩码的输入字段来输入 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" />

标签： javascriptjquerymaskedinput

解决方案

像这样的东西？

// 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" />

推荐阅读