正则表达式只允许数字和小数不能在Javascript中工作

时间:2017-02-01 12:58:39

标签: javascript html regex

我正在尝试以下代码并且正则表达式不起作用,它允许输入框中的所有字符。

所需:输入文本框不应接受除数字和小数点以外的任何其他字符。

<html>
<body>
    <input type="text" onkeypress="myfunction(event);"></input>
<script>
    function myfunction(e){
         var p = new RegExp(/^[0-9]+([.][0-9]+)?$/);
         return e.charCode === 0 ||   p.test(String.fromCharCode(e.charCode));      
    }
</script>
</body>
</html>

4 个答案:

答案 0 :(得分:2)

您每次都会向myfunction函数传递1个字符,因此您无法使用/^[0-9]+([.][0-9]+)?$/正则表达式检查整个值,以确保遵循您的格式。

检查您是否输入数字,或仅在输入字段中没有点时输入点:

<input type="text" id="test" onkeypress="return myfunction(event);" />
<script>
function myfunction(e) {
  return e.charCode === 0 || ((e.charCode >= 48 && e.charCode <= 57) || (e.charCode == 46 && document.getElementById("test").value.indexOf('.') < 0));
}
</script>

答案 1 :(得分:1)

这是一种替代方式。我使用了oninput事件,该事件是在用户更改每个值时触发的(不仅是按键)。我保存最后一个有效值,并在新值无效时恢复它。

&#13;
&#13;
<input type="text" id="test1" oninput="validateNumber(this);" />
<script>
var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}
</script>
&#13;
&#13;
&#13;

与此处的大多数其他答案形成鲜明对比的是,所有输入技术都可以完美运行,例如拖放,复制&#39;粘贴等。它还支持{{1}等特殊控制键(用于选择内容),Ctrl+aPos1等等。

答案 2 :(得分:0)

应该在函数之前添加“return”。

HTML:

<input type="text" value="" onkeypress="return myfunction(event)" />

JS:

function myfunction(e){
  var p = new RegExp(/^[0-9]+([.][0-9]+)?$/);
  return e.charCode === 0 || p.test(String.fromCharCode(e.charCode));
}

关于正则表达式:

正则表达式的问题是“。”是一个在其后面有数字的子集的一部分。 所以:“5”无效但“5.3”有效。但是,该功能运行每次键按下!

所以让我们试着写一下:5.3应该是有效的:

  

5 - 有效

     

。 - 无效

     

3 - 有效

解决方案是允许“。”只要它出现在一个数字之后就可以独立。

之后,必须进行另一次验证,以确保“。”之后有数字。

JSFIDDLE

答案 3 :(得分:0)

尝试将字符串存储在“缓冲区”中:

<html>
<body>
    <input type="text" onkeypress="myfunction(event);"></input>
<script>
    var inputString = "";
    function myfunction(e){
         if (e.charCode === 0)
           return true;
         var p = new RegExp(/^[0-9]+([.][0-9]+)?$/);
         var testString = inputString + String.fromCharCode(e.charCode);
         if (p.test(testString))
           return true;
         inputString = testString;      
    }
</script>
</body>
</html>

因为我没有测试它,所以需要一些盐:)

您也可以只读取输入的内容,但这不一定很漂亮。另一方面,使用我的解决方案,您可能会遇到像退格键或用户点击文本中间并以这种方式键入内容的问题。这只是为了让您了解这些限制。