如何验证输入框中的值是否只是数字？答案

【问题标题】：How do I validate that value entered into an input box is just numbers?如何验证输入框中的值是否只是数字？
【发布时间】：2011-02-23 07:23:55
【问题描述】：

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

有什么想法吗？

谢谢

【问题讨论】：

是否允许实数？或者只是整数。
stackoverflow.com/questions/18082/…
尝试取平方根，找出错误。

标签： javascript html

【解决方案1】：

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

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

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

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

【讨论】：

相比 tryparse()，您更喜欢这种方法吗？
请在调用parseInt时使用第二个参数
@mcass20 不知道tryparse 是什么：">
如果您想要更严格的检查，也可以这样做：parseInt(str, 10).toString()==str。
哦，对不起！ Int32.TryParse() msdn.microsoft.com/en-us/library/f02979c7.aspx

【解决方案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(re).

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

【讨论】：

或者你可以使用正则表达式。
您能否扩展该答案？我不是很熟悉它，非常感谢谢谢
我认为它不允许浮点值。

【解决方案3】：

虽然 nc3b 很接近，但使用 parseInt 实际上会允许您可能不希望它出现的情况。

parseInt("133t",10)

结果：133

做得更好

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

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

【讨论】：

【解决方案4】：

我使用 jquery 和 AlphaNumeric 插件，请参阅此处以获取 demo

【讨论】：

嗨，我有我输入：在底部，但它给了我一个 $(".datapoints").numeric is not a function 错误。谢谢
对不起，我不知道如何突出显示评论中的代码，真的很抱歉。
如果不查看您的代码就不确定，也许可以尝试为您的输入提供一个 id='myid' 并使用 $('myid').numeric()，同时确保您同时引用 jquery 和字母数字插件。
我怀疑你没有添加对 jquery 的引用

【解决方案5】：

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

if(isNaN($('input[type=text]').val())

顺便说一句 isNaN 表示不是数字

【讨论】：

$('input[type=text]').val() 将始终返回一个字符串，即使只输入整数，所以这将始终返回 false。

【解决方案6】：

代码抓取输入值，然后从头到尾检查，{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;
    }

【讨论】：

【解决方案7】：

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

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

编辑好久没看，不得不说我喜欢this one的样子。验证和屏蔽，而不是特定于库的（尽管如果您愿意，可以使用 jQuery 插件）。同样，将它们联系起来并不是重点，但它看起来很酷，可以大喊大叫。

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

不要忘记服务器端验证，以防人们关闭了 javascript。

【讨论】：

【解决方案10】：

nc3b 已经发布了一些好的答案和skyfoot。

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

Skyfoot 的回答可能不允许负值和可能允许空字符串。

为了避免这些陷阱，我使用了下面的代码 sn-p。

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

【讨论】：