数字输入字段JavaScript自定义验证

Question

我有一个输入数字字段，我在其中注册了所有更改的事件：

• onChange
• onkeydown
• onKeyup
• onMousedown
• onmouseup

我需要允许使用以下规则插入数字值：

• 0和24之间的值
• 可能具有小数为小数。
• 十进制值必须只有1个小数。
• 小数部分必须是0.5的倍数。

如果当前值无效，我需要立即替换旧值。

所以我必须接受例如这样的值：

• 0
• 0.5
• 12
• 23.5
• 24

我不能接受这样的价值：

• 你好
• -0，
• -1
• 。
• ,,
• .5
• 25
• -2
• ...
• e

我尝试使用此代码，但并不涵盖所有情况：

function customValidation(value) {
    return /^d*[.,]?]*[5]{0,1}$/.test(value) && (value === "" || (parseFloat(value) <= 24 && parseFloat(value) >= 0));
}
function eventListner(el) {
    if (customValidation(el.value)) {
        el.oldValue = el.value;
    } else if (el.hasOwnProperty("oldValue")) {
        el.value = el.oldValue;
    }
}

Answer 1

听起来您可以从使用"数字"输入类型中受益，而只需指定最小，最大和步骤属性，而不是使用Regex来获得有效性。例如：

<input type="number" name="myNumber" id="myNumber" min="0" max="24" step="0.5">

然后，您只能使用可用的标准方法检查有效性：

let myNumberInput = document.getElementById("myNumber");
let myNumberIsValid = myNumberInput.checkValidity();

MDN Web文档在其约束验证API页面上还具有一些有用的信息。

Answer 2

此正则涵盖所有情况：

/^(?:(?:d|1d|2[0-3])(?:.[05])?|24(?:.0)?)$/

https://regex101.com/r/kzevka/1

扩展：

 ^                    # BOS
 (?:
      (?:                  #    0 - 23.5
           d 
        |  1 d 
        |  2 [0-3] 
      )
      (?: . [05] )?
   |                     # or,
      24                   #    24.0
      (?: . 0 )?
 )
 $                    # EOS