Ввод текста В реальном времени JS проверка в формате с плавающей запятой, которая принимает с плавающей запятой и запятой

Question

Я хочу проверить ввод в режиме реального времени. Ввод имеет тип текста и должен проверять только вход, имеющий: число (я) и / или с плавающей запятой или запятой. Также ввод принимает только два числа после плавающей запятой / запятой. Примеры:
- 12,23 действителен
- 12,23 действителен
- 12,2 действителен
- 12,02 действителен
- 2 действителен
- 12,035 недействителен
- 12,36E недействителен
- тест недействителен

Answer 1

Я предлагаю отслеживать проверку правильности ввода с помощью регулярного выражения /^(\d*)([,.]\d{0,2})?$/, которое позволяет вводить любые 0 или более цифр в начале, а затем необязательную подстроку , или ., а затем 0, 1 или 2 цифры. Если есть совпадение, переформатируйте значение, заменив , на .. Если входное значение не совпадает, замените его последним подходящим значением (например, введите для этого переменную с именем prevValue).

После того, как вы хотите передать это значение, вам нужно убедиться, что значение в окончательном формате, то есть не должно быть . в конце. Чтобы включить это, добавьте атрибут pattern к вашему <input> и присвойте ему регулярное выражение ^\d+(?:\.\d{1,2})?$. Здесь, это уже потребует 1+ цифр в начале строки, а затем будет соответствовать необязательной подстроке ., за которой следуют 1 или 2 цифры. См. демонстрационное выражение . Поскольку запятая будет заменена точкой, вам не нужен шаблон [.,], достаточно \..

Кроме того, рекомендуется обрабатывать изменение входного значения при paste. * 1021. *

var prevValue = "";
var patt = /^(\d*)([,.]\d{0,2})?$/;

function validateCurrencyPattern(price){
    var matchedString = price.match(patt);
    if (matchedString) {
        prevValue = matchedString[1] + (matchedString[2] ? matchedString[2].replace(",", ".") : "")
        return prevValue;
    }
    else {
      return prevValue;
   }
}
$(document).on("keypress keyup blur paste","#field", function (event) {
 $(this).val(validateCurrencyPattern($(this).val()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <input type="text" id="field" name="field" pattern="^\d+(?:\.\d{1,2})?$"/>
 <input type="Submit"/>
</form>

Answer 2

Поскольку я не нашел решение в стеке и потратил несколько часов на разработку решения, которое может помочь другим, я поделюсь тем, что я сделал:
Я использовал шаблон RegExp для проверки числа. Но я могу не делайте это с одним шаблоном, поэтому я создал два шаблона.
Первый проверяет: x * .yy
А второй проверяет: x *, yy
Ограничения: isNumeri c не принять переменную с помощью comma.so, поэтому я преобразовал ее.

Код функции проверки функции:
и вызов функции, смешивающей события (размытие при нажатии клавиши)

function validateCurrencyPattern(price){
    var patt = new RegExp(/[0-9]+[.]{1}[0-9]{2}/i);
    var convertedPrice =price.replace(',', '.');
    var matchedString = price.match(patt)  ;
    var matchedString2 = convertedPrice.match(patt)  ;
    if (matchedString) {
        return matchedString
    }
    if (matchedString2) {
        return matchedString2
    }
    if((!$.isNumeric(convertedPrice))|| convertedPrice<0){
        return null;
    }
    else if(!matchedString && !matchedString2){
      return  convertedPrice;

    }
}
$(document).on("keypress keyup blur","#field", function (event) {
 $(this).val(validateCurrencyPattern($(this).val()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field" name="field">

Не стесняйтесь оптимизировать это решение или предложить другую альтернативу, которая может быть лучше существующего решения.