繁体   English   中英

如何验证在输入框中输入的值只是数字?

[英]How do I validate that value entered into an input box is just numbers?

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

有任何想法吗?

谢谢

如果只允许整数值,我会尝试类似的方法:

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

编辑:@ M28和@unomi是正确的,这可能允许一些不是数字的输入。 M28在评论中发布了一个非常好的解决方案:

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

您可以使用正则表达式^ \\ 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)。

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

当nc3b关闭时,使用parseInt实际上将允许您可能不希望使用的情况。

parseInt("133t",10)

结果:133

最好做

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

如果要确保整个字符串必须代表数字。

我使用jquery和一个AlphaNumeric插件,请参见此处的演示

nc3bskyfoot已经发布了一些好的答案。

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

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

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

再见isNaN表示不是数字

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

在这里不链接特定的链接,因为那不是重点,在“ javascript表单验证库”上进行搜索会发现很多内容。

编辑我没看一会儿,我不得不说,我喜欢的外观这一项 验证和屏蔽,而不是库特定的(尽管您愿意,也可以使用jQuery插件)。 同样,链接它们并不是真正的重点,但是看起来很酷,可以喊出来。

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

与jQuery搭配使用-http: //digitalbush.com/projects/masked-input-plugin/

仅允许输入数字。 它也非常易于使用和完全自定义,更不用说重量轻了。

在客户端,从<input type="number"> (在尚不支持HTML5的浏览器中,这将被视为type="text" 。然后,对于非HTML5使用javascript(由其他人建议)浏览器。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM