输入数字验证 - 限制仅输入数字或数字，int 和 float 两者

Question

如何限制输入字段只输入 numbers/digits int 和 float 两者。有时我们需要为金额等字段同时允许整数和浮点值，因此在这种情况下需要进行验证。没有可用的解决方案，但它们的代码量很大。所以需要一个简短但有效的代码。

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

Answer 1

No need for the long code for number input restriction just try this code.

It also accepts valid int & float both values.

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 />

更新

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

But as per comments, some wants to allow few special cases like negative numbers & showing the invalid keystrokes to user before removing it, so below is the code snippet for such special use cases.

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

Answer 2

单行方案 #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.

你也可以使用minand/ormax属性来设置最小值and/or最大值

一线解决方案#2：

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

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

此 RegExp 接受以点 (.) and/or 和负号 (-) 开头的数字。

Answer 3

要事第一。我更喜欢显示无效的击键而不是阻止它们。用户体验堆栈交换目前似乎同意 (see this question)。

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

其次。这不会取代验证步骤。某些有效的击键组合不是有效数字，但需要被允许才能输入有效数字。例如，用户可以键入一个小数点（句号或逗号，具体取决于他们使用的语言），然后离开文本框，这样您就没有有效的数字。以下字符串均为数字开头，但尚未生效：

.
-.
,
-,

前两个是 .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键或左箭头回到开头，它不会让你把它变成负数。

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

Answer 4

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

Answer 5

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

设置输入字段的样式 and/or 显示错误消息

.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'让手机浏览器打开一个数字键盘，当然你也可以设置type为text.
浏览器对 pattern 输入属性的支持：http://caniuse.com/#feat=input-pattern
浏览器对 :invalid css 选择器的支持：http://caniuse.com/#feat=form-validation
模式正则表达式不支持指数表示法，例如1.23e4.
模式正则表达式不允许空格——它们在 int 和 float 表示法中无效，但允许它们可能会改善用户体验。

Answer 6

用户无法在js中输入十进制值。尝试使用此代码：

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

输入数字验证 - 限制仅输入数字或数字，int 和 float 两者

Input number validation - Restrict to enter only numbers or digits, int & float both

javascript

floating-point

validation

jquery

numbers

Javascript 方法

jQuery 方法