Question

我正在尝试仅允许输入文本字段的十进制和数字值，如下所示

下面的

是有效的

无效

abc
ac$%$
asdf90
09.89abg#$#
-903abe
+8938/.99
....90.97

到目前为止，一切都很好。但是如果用户只给出小数点或多于一个没有数字的小数点，我想突出显示文本字段边界。当他提供有效的输入时，应该删除突出显示。

如何使下面的代码变得非常简单。

<input type = "text" maxlength = 4, value ="0.0", min=0 max=100/>

$(key).bind("#txtOne", function(obj){ // but i dont know why this Jquery allow character be entered sometimes
    let numberOnly=/^[0-9]+\\.?[0-9]*$/;                    
    if (!numberOnly) {
        return obj.preventDefault();
    }else{
        return true;
    }
}); 

$("#txtOne").on("keypress keyup blur", function(event) {    //after including this, working as expect 
  $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
});

帮助会很有用。提前谢谢

如果可能请给我一些小提琴示例

Answer 1

所以你想要实现的并不是阻止人们不连续输入小数点，而是强迫用户输入数字。我已经制作了一个小代码来向您展示它是如何工作的

$("input").on("input", function() { //on user input
    const value = $(this).val();
  if (isNaN(value)) { // check if this is a number. '1.0' is a number. '1.0.a' is not'
    $(this).css('color', 'red');
  } else {
    $(this).css('color', 'black');
  }
})

跑步小提琴：Jsfiddle

Answer 2

您似乎正在使用此正则表达式：

^[0-9]+\\.?[0-9]*$

这个正则表达式允许字母，因为它有.，它匹配除行结尾之外的所有内容。 \\部分不转义它以匹配文字.。

要解决此问题，请尝试删除其中一个\。这是在分隔符\...\内，因此您不需要转义\。

或者，我写了这个正则表达式：

^(?:[+-])?(?:\d*\.)?\d+$

这也符合正面和负面的迹象。

编辑：

我刚测试了您的正则表达式，发现它与.999或123.等前导或尾随时段不匹配。

在线试用我的正则表达式：https://regex101.com/r/eSM2CK/1

regx或pattern - 如何防止多次输入相同的字符？

2 个答案: