IE11中负数输入验证异常：生产环境经纬度字段验证失效

兄弟，你碰到的这个问题是IE11对HTML5 number输入框的浮点数范围验证存在已知兼容性bug——它在处理带小数的负数时，数值解析逻辑出了问题，导致明明在合法范围内的数被错误判定为无效。比如你说的-156.6被拒、-157却能通过，就是因为IE11对小数精度的处理出现了偏差，完全是浏览器自身的问题，和你的代码逻辑无关。

问题根源 #

IE11的原生number输入框在验证min/max规则时，对负数浮点数的解析存在精度丢失或截断错误，导致部分符合范围的小数被误判为超出限制，而且这个bug只针对带小数的负数，整数负数则不受影响。

解决方案 #

下面给你两个靠谱的解决思路，任选其一都能搞定这个问题：

方法一：改用文本输入框+自定义JS验证

既然原生number验证不靠谱，咱直接换成text类型输入框，自己写验证逻辑，完全掌控规则，彻底避开浏览器的bug。

示例代码：

<!DOCTYPE html>
<html>
<body>
  <form action="/action_page.php" onsubmit="return validateCoordinate()">
    数值范围 (-180 至 180):
    <input type="text" id="coordinate" name="quantity" placeholder="请输入带小数的数值"><br>
    <span id="errorTip" style="color: red; display: none;">请输入-180到180之间的有效数值</span>
    <input type="submit">
  </form>

  <script>
    // 表单提交时的验证逻辑
    function validateCoordinate() {
      const inputEle = document.getElementById('coordinate');
      const errorTip = document.getElementById('errorTip');
      const inputValue = parseFloat(inputEle.value);

      // 验证是否为有效数字，且在指定范围内
      if (isNaN(inputValue) || inputValue < -180 || inputValue > 180) {
        errorTip.style.display = 'inline';
        return false; // 阻止表单提交
      }
      errorTip.style.display = 'none';
      return true; // 验证通过，允许提交
    }

    // 可选：限制输入内容只能是数字、负号和小数点
    document.getElementById('coordinate').addEventListener('input', function(e) {
      // 过滤非允许字符
      this.value = this.value.replace(/[^-\d.]/g, '');
      // 确保只有一个小数点
      const dotParts = this.value.split('.');
      if (dotParts.length > 2) {
        this.value = dotParts[0] + '.' + dotParts.slice(1).join('');
      }
      // 确保负号只能在开头
      if (this.value.indexOf('-') !== 0 && this.value.includes('-')) {
        this.value = this.value.replace(/-/g, '');
      }
    });
  </script>
</body>
</html>

方法二：引入HTML5表单验证Polyfill

如果想继续用原生number输入框，可以引入专门的polyfill工具来修复IE11的HTML5表单支持缺陷，让min/max/step规则正常工作。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入webshim polyfill -->
  <script src="//cdn.jsdelivr.net/webshim/1.16.0/webshim/polyfiller.js"></script>
  <script>
    // 启用表单相关特性的polyfill
    webshims.polyfill('forms');
  </script>
</head>
<body>
  <form action="/action_page.php">
    数值范围 (-180 至 180):
    <input type="number" name="quantity" min="-180" max="180" step="0.0001"><br>
    <input type="submit">
  </form>
</body>
</html>

引入polyfill后，IE11就能正确识别你设置的验证规则，不会再误判合法的小数数值了。

如果你的项目用了Vue、React这类前端框架，也可以直接用框架自带的表单验证组件（比如Vue的VeeValidate、React的Formik）来替代原生验证，同样能避开这个IE11的坑。

内容的提问来源于stack exchange，提问作者lewi