Проблема с динамической проверкой числа типов ввода HTML5 с помощью регулярных выражений

Question

У меня есть динамический ввод, сгенерированный простым jQuery(...).apend(...), который рисует этот код на моей веб-странице:

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

Я могу проверить первую часть (максимальный размер символов, включая ','), но она дает мне ошибку, когда вы пытаетесь проверить десятичные числа.

он указал значение "111". неверный номер Значение должно совпадать к следующему регулярному выражению: - (\ d + | \ d + \ d + |.. \ D +)? (? [ЕЕ] [- +] \ d +)

Когда я тестирую код регулярного выражения в консоли Chrome, он работает (как в этих примерах)

/^(?:\d{0,8})(?:,\d{0,3})?$/.test('1234,12');
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('123,');

но не работает внутри ввода. Что я могу делать не так?

Answer 1

Ваше регулярное выражение не работает, потому что вы пытаетесь сопоставить , на входе.Однако, даже если вы видите , в браузере, внутренне оно сохраняется как . (возможно, чтобы избежать проблем, с которыми вы сталкиваетесь сейчас, когда браузер использует разные локали)

Так что используйте *Вместо 1006 * для вашего регулярного выражения.

Здесь я оставляю демонстрацию кода.Я добавил alert для каждого нажатия клавиш, чтобы вы могли видеть, как он хранится.Попробуйте написать 1,1 и посмотрите, что получится.

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="alert(this.value); /^\d{1,8}(?:\.\d{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

Answer 2

В дополнение к ответ Хулио

обратите внимание, что step="0.1" также может нарушить проверку вашей формы.

Лучше придерживаться проверки вашего регулярного выражения (для 3 десятичных знаков, step="0.001")

Подробнее здесь

Answer 3

попытаться отделить функцию от элемента

    const myElement = document.getElementById("someInput");
    myElement.oninput = function(ev) {
        /^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0, -1);
    }

    <input type="number" id="someInput" name="19000003" min="0" max="99999999" required="" step="0.1" />