验证 Microsoft Edge 中值低于 0 的范围输入答案

【问题标题】：Validation of range input in Microsoft Edge with values below 0验证 Microsoft Edge 中值低于 0 的范围输入
【发布时间】：2020-06-25 15:35:28
【问题描述】：

我在使用 Microsoft Edge 时发现了一些奇怪的东西。我有一个范围类型的输入元素，用户可以在其中以 0.1 的步长选择 0.5 到 0.8 的值。选择0.5或0.8时，表单按预期验证。如果 0.6 或 0.7 验证返回 false 并且此字段的验证消息说我必须输入有效日期。

<script type="text/javascript">
  function checkForm() {
    msg = (document.getElementById('myForm').checkValidity()) ? "OK" : "ERROR"
    document.getElementById('message').innerHTML = msg + ': ' + document.getElementById('field').validationMessage;
  }
</script>


<form id="myForm">
  <input type="range" min="0.5" max="0.8" step="0.1" value="0.6" labels="0.5, 0.6, 0.7, 0.8" id="field" name="field">
  <input type="button" name="save" value="Submit" onClick="checkForm()" />
</form>
<div id="message"></div>

该问题仅出现在 Microsoft Edge（没有 Chromium 渲染引擎）中。 Chrome、Firefox 和 Mobile Chrome 正在按预期工作。当我使用步骤 1 将范围从 5 更改为 8 时，即使 Edge 也在工作。

我的想法已经不多了......

https://jsfiddle.net/7zwpbtok/

【问题讨论】：

如果您现在不需要修复它，您可以等待。非 Chromium Edge 基本上正在被淘汰。因此，这可能不会很快成为问题。我也 saw an issue in Edge 但被建议只是等待它，基本上。可能会更好。
我知道。但这可能需要很长时间，因为我在一个大型企业环境中工作，这里的一切都很慢。当 IE9 发布时，我们仍然得到 IE7。然后花了一段时间才升级到 IE9（IE10 即将发布）。
我在 Edge Legacy 上重现了这个问题。我也试过min="0.4" max="0.7" step="0.1"，现在0.4和0.6就可以了。在计算这些验证时似乎有一些问题，我找不到要遵循的规则。这可能是 Edge Legacy 浏览器的问题，您可以尝试在反馈中心提供反馈。但我不确定它是否会在可预见的时期内修复新的 Edge Chromium 发布。您可以解释您想要实现的目标，我们可以看看是否有任何解决方法。
作为我的问题的解决方法，我决定使用整数。由于所选值是乘法的一个因素，因此我将从数据库中收到的数字（例如 0.6）乘以 100，在用户选择新值后，我将其除以 100，然后再存储到数据库中。所以用户现在选择一个百分比值而不是一个因子。结果是一样的，但 Edge 可以像所有其他浏览器一样处理这个问题。
太棒了！您可以将解决方案作为答案并将您的答案标记为已接受的答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。

标签： javascript html validation range microsoft-edge

【解决方案1】：

为了解决我的问题，我决定使用整数。由于所选值是乘法的一个因素，因此我将从数据库中收到的数字（例如 0.6）乘以 100，在用户选择新值后，我将其除以 100，然后再存储到数据库中。所以用户现在选择一个百分比值而不是一个因子。结果是一样的，但 Edge 可以像所有其他浏览器一样处理这个问题。

【讨论】：