Числовое поле ввода Пользовательская проверка 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

Это регулярное выражение охватывает все случаи:

/^(?:(?:\d|1\d|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

Answer 2

Похоже, вы могли бы выиграть от использования типа ввода «число» и простого указания свойств min, max и step вместо использования 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 также есть некоторая полезная информация об их проверке ограниченийAPI стр.