使用小于 0 的值验证 Microsoft Edge 中的范围输入

Question

我在使用 Microsoft Edge 时发现了一些奇怪的东西。我有一个范围类型的输入元素，用户可以在其中以 0.1 为步长 select 从 0.5 到 0.8 的值。当 selected 为 0.5 或 0.8 时，表单会按预期进行验证。如果 0.6 或 0.7，则验证 returns 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/

Answer 1

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

使用小于 0 的值验证 Microsoft Edge 中的范围输入

Validation of range input in Microsoft Edge with values below 0

html

javascript

validation

range

microsoft-edge