Question

我想知道最好和最简单的方法是确保用户在输入框中输入的值是网页中的数字吗？要么通知他们，他们在编辑时不允许他们或者不允许他们输入非数字值开始。

任何想法？

谢谢

Answer 1

如果只允许整数值，我会尝试类似：

if( isNaN(parseInt(str, 10)) ) {
    //error
}

编辑： @ M28和@unomi是对的，这可能允许一些不是真正数字的输入。 M28在评论中发布了一个真正的好解决方案：

if( ! (parseInt(str, 10).toString() == str) ) {
    //error
}

Answer 2

您可以使用正则表达式^ \ d * $

var re = new RegExp("^\d*$");
  if ($("#someinput").val().match(re)) {
    alert("Only numbers");
  } else {
    alert("No match");
  }

^ tells the expression to start matching from the beginning of the string. 
\d is a match for numbers which is the same as [0-9] (any number from 0 to 9)
* tells to match all numbers in string.
$ tells the expression to match until the end of the string.

$（“＃someinput”）。val（）是jquery但你可以使用普通的javascript，如： document.somepintput.value.match（重新）。

正则表达式非常值得学习，因为它们可以以简洁明了的方式解决许多问题。 Regular expressions

Answer 3

当nc3b关闭时，使用parseInt实际上会允许你可能不想要它的情况。

parseInt("133t",10)

结果：133

最好做

if(isNaN(Number(str, 10)){
  Error;
}

如果您想确保整个字符串必须代表一个数字。

Answer 4

我使用jquery和AlphaNumeric插件，请参阅此处查看demo

Answer 5

您可以使用javascript检查可能使用isNAN函数的事件，以查看输入的值是否为数字。

如果（isNaN（$（ '输入[类型=文本]'）。VAL（））

bye the way isNaN表示不是数字

Answer 6

到目前为止，您最好的选择是通过验证库和/或输入屏蔽库来利用已经为您完成此操作的人的工作。不要重新发明轮子，几个漂亮的轮子，轮辋几乎适合任何汽车，已经为你发明了。

这里没有链接特定的，因为这不是重点，搜索“javascript表单验证库”会发现很多。

编辑我没有看过一段时间，我不得不说我喜欢this one的样子。验证和屏蔽，而不是特定于库（尽管如果你愿意，还有一个jQuery插件可用）。再一次，将它们联系起来并不是重点，但它看起来很酷，可以大声喊出来。

Answer 7

代码抓取输入值，然后从头到尾检查，{5}是位数（这是可选的）。

function validzip(){ txt1 = document.FormName.InputName.value; if (/^\d{5}$/ .test(txt1) == false){ /* Simpler/longer alternative to this is: if ((/[0-9]/g .test(txt1) == false) || (txt1.length != 5)){ */ alert('Not Valid'); return false; }



        return true;
    }

return true; }

Answer 8

与jQuery一起使用 - http://digitalbush.com/projects/masked-input-plugin/

只允许输入数字。它也非常易于使用和完全定制，更不用说重量轻了。

Answer 9

在客户端，以<input type="number">开头（这将在尚未支持HTML5的浏览器上视为{{1}}。然后使用javascript（如其他人所建议的）用于非HTML5浏览器。

如果人们关闭了javascript，请不要忘记服务器端验证。

Answer 10

已经从nc3b张贴了一些好的答案和skyfoot。

但是nc3b的答案可能会失败，因为输入具有007等前导零，并允许指数输入。

skyfoot的回答可能不允许负值而可能允许空字符串。

为了避免这些陷阱我使用了以下代码段。

 $(document).ready(function(){
      $("input").change(function(){
      var enteredValue = $(this).val();
      var re = new RegExp("^[-+]?[0-9]+$");
      if (enteredValue != "" && re.test(enteredValue)) {
        alert("You have entered valid integer");
      } else {
        alert("This is not valid integer");
      }
        //alert("The text has been changed.");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").change(function(){

var enteredValue = $(this).val();
var re = new RegExp("^[-+]?[0-9]+$");
  if (enteredValue != "" && re.test(enteredValue)) {
    alert("You have entered valid integer");
  } else {
    alert("This is not valid integer");
  }
    //alert("The text has been changed.");
  });
});
</script>
</head>
<body>

<input type="text">
<p>Write something in the input field, and then press enter or click outside the field.</p>

</body>
</html>

如何验证输入到输入框中的值只是数字？

10 个答案: