文本输入实时JS验证为Float，接受浮点和逗号

Question

我想实时验证输入。输入具有文本类型，并且必须仅验证具有：数字和/或浮点或逗号的输入。此外，输入只接受浮点/逗号后的两个数字。示例：
-12.23 nbsp 有效
-12,23 nbsp nbsp；有效
-12.2 nbsp nbsp 有效
-12,02 nbsp 有效
-2 nbsp nbsp nbsp nbsp nbsp；有效
-12.035 nbsp；无效
-12.36E无效
-test nbsp nbsp 无效

Answer 1

我建议使用/^(d*)([,.]d{0,2})?$/正则表达式来跟踪实时输入验证，该正则表达式允许在开头键入任何0个或多个数字，然后是可选的,或.子字符串，然后是0、1或2个数字。如果存在匹配，请通过将,替换为.来重新格式化该值。如果输入值不匹配，请将其替换为最后一个好值(例如，为此引入一个名为prevValue的变量(。

一旦你想提交这个值，你需要确保这个值是最终的格式，也就是说，最后不应该有.。要启用此功能，请在<input>中添加一个pattern属性，并为其分配^d+(?:.d{1,2})?$regex。在这里，它在字符串的开头已经需要1个以上的数字，然后将匹配后面跟着1或2个数字的.的可选子字符串。请参阅regex演示。由于逗号将被替换为点，因此不需要[.,]模式，.就足够了。

此外，处理paste上的输入值更改也是一个好主意。

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
限制：isNumeric不接受带有comma的浮点值，所以这就是我转换它的原因。

函数验证函数代码：
和函数混合事件调用(按键模糊(

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">

请随意优化此解决方案，或建议其他可能比现有解决方案更好的替代方案。