输入数字验证-限制只输入数字或数字，int &浮动

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

不需要长代码的数字输入限制，试试这个代码。

也接受有效的int &浮动两个值

Javascript方法

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery方法

$(function(){
  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

以上答案适用于最常见的用例——将输入验证为数字。

但是根据注释，有些人希望允许一些特殊情况，比如负数&之前向用户显示无效的击键删除它，所以下面是这种特殊用例的代码片段。

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/['D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

一行程序解决方案# 1:

使用<input type="number">和step属性。

<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.
<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.

您也可以使用min和/或max属性设置最小值和/或最大值。

---

一行解决方案#2:

使用具有RegExp pattern属性的常规文本input元素

<input type="text" pattern="^-?([0-9]*'.?[0-9]+|[0-9]+'.?[0-9]*)$">

这个RegExp接受以点(.)和/或负号(-)开头的数字。

重要的事情先做。我更喜欢显示无效的击键，而不是阻止它们。用户体验堆栈交换目前似乎同意(参见这个问题)。

也就是说，不是每个人都同意，所以让我们看看我们能做些什么。

。这并不能取代验证步骤。有一些有效的按键组合不是有效的数字，但是为了输入有效的数字需要被允许。例如，用户可以输入一个小数点(句号或逗号，取决于他们使用的语言)，然后离开文本框，而您没有一个有效的数字。以下字符串都是数字开头，但还不合法:

• 。
• 。
• ,
• ,

前两个是。5或-的开头。5，而最后两个在使用逗号而不是句号作为小数点的各种语言中是相同的。

这就引出了(已经被拒绝的)

<input type="number" step="any">

当然，您必须包含一个JavaScript脚本来修复非现代浏览器，但这些都是可用的。理论上，当用户在使用逗号而不是句号作为小数点的语言时，这些也应该正确工作。更好的是，因为用户通常只使用一个浏览器，因为他们会习惯在那个浏览器中输入数字的工作方式，因为他们会把大部分时间花在其他网站上，如果你的网站不像他们习惯的那样运行，他们可能会感到困惑。

但也许你仍然想要自己的解决方案。如果所有这些都失败了，我将使用正则表达式(是的，我知道，我现在有两个问题)。我不赞成空格，所以我把它限制为一个负号、数字和一个小数点(无论他们使用哪个)。例如:

$('.rational-number').on('keypress', function(e)
{
  if (e.charCode >= 32 && e.charCode < 127 && 
      !/^-?'d*[.,]?'d*$/.test(this.value + '' + String.fromCharCode(e.charCode)))
  {
    return false;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type-"text" class="rational-number">

这几乎可以工作。现在唯一的问题是，它假设你输入的任何字符都在字符串的末尾。这很好，除了负数的'-'，这只允许在开始。所以你可以输入-5.4，但如果你输入5.4，然后按home键或左箭头回到开始，它不会让你把它设为负。

它也不能处理粘贴。粘贴是一个复杂的话题。我不同意拒绝所有的粘贴操作。我觉得这里最好的选择是让用户粘贴，让验证器挑选任何无效的数字。

您可以在输入字段中添加pattern属性。如果输入值与模式不匹配，您可以使用css选择器:invalid:

为输入字段设置样式和/或显示错误消息

.error-msg {
  display: none; /* Hide by default */
}
.number-only:invalid {
  background: pink;
}
.number-only:invalid + .error-msg {
  display: inline;
}

<input type='tel' class='number-only' pattern='[+'-]?'d*'.?'d+' />
<span class='error-msg'>Please enter a valid integer or float value.</span>

一些注意事项:

• type='tel'使移动浏览器打开数字键盘，当然你也可以将类型设置为text。
• 浏览器对pattern输入属性的支持:http://caniuse.com/#feat=input-pattern
• 浏览器对:invalid css选择器的支持:http://caniuse.com/#feat=form-validation
• 模式正则表达式不支持指数表示法，例如1.23e4。
• 模式正则表达式不允许空格& & &;它们在int和float符号中无效，但允许它们可能会改善用户体验。

在文本框的onkeypress中调用一个jquery函数。在该函数中，使用相应的ascii码来限制输入。

用户不能在js中输入十进制值。尝试使用以下代码:

if(document.getElementById(id).value.indexOf('.') != -1){
    print "do not Enter decimal nuber";
}