regex 文本输入真实的时间JS验证为Float,接受浮点和逗号

7tofc5zh  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(154)

我想以真实的时间方式验证输入。输入具有类型文本,并且必须仅验证具有以下内容的输入:数字和/或浮点数或逗号。此外,输入仅接受浮点数/逗号后的两个数字。示例:

  • 12.23 有效
  • 12,23 有效
  • 12.2 有效
  • 12,02 有效
  • 2 有效
  • 12.035无效
  • 12.36E无效
  • 测试 无效
    编辑:

由于我没有在堆栈上找到解决方案,并花了一些时间来开发一个可以帮助他人的解决方案,我将分享我所做的事情:
我使用了RegExp模式来验证数字。但是我不能用一个模式来验证,所以我创建了两个模式。第一个验证:x*. yy第二个验证:x*,yy
约束:isNumeric不接受comma.so的float,这就是我转换它的原因。
函数验证函数代码:

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()));
});

字符串
和调用混合事件的函数(keypress keyup blur)

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

sqxo8psd

sqxo8psd1#

我建议使用/^(\d*)([,.]\d{0,2})?$/正则表达式来跟踪实时输入验证,该正则表达式允许在开始时键入任何0或更多数字,然后是,.的可选子字符串,然后是0,1或2个数字。如果有匹配,则通过将,替换为.来重新格式化值。如果输入值不匹配,用最后一个正确的值替换它(比如,为此引入一个名为prevValue的变量)。
一旦你想提交这个值,你需要确保这个值是最终格式,也就是说,结尾不应该有.。要启用这个,添加一个pattern属性到你的<input>,并将^\d+(?:\.\d{1,2})?$正则表达式赋给它。在这里,它已经要求字符串的开头有1+位,然后将匹配.的一个可选子串,后跟1或2个数字。参见the regex demo。由于逗号将被替换为点,因此您不需要[.,]模式,\.就足够了。
此外,最好在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()));
});

个字符

i34xakig

i34xakig2#

由于我没有在堆栈上找到解决方案,并花了一些时间来开发一个可以帮助他人的解决方案,我将分享我所做的事情:
我使用RegExp模式来验证数字,但我不能用一个模式来验证,所以我创建了两个模式。
第一个验证:x*.yy
第二个验证:x*,yy
约束:isNumeric不接受comma.so的float,这就是我转换它的原因。
函数验证函数代码:
和调用混合事件的函数(keypress keyup blur)

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()));
});

个字符
请随意优化此解决方案或建议另一个可能比现有解决方案更好的替代方案。

相关问题