Question

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

变化
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文档的Constraint validation API页面上也有一些有用的信息。

Answer 2

此正则表达式涵盖所有情况：

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

installed cni-metrics-helper

展开：

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

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

2 个答案: