Javascript 输入数字验证-限制仅输入数字或数字，int&；两者都浮动

如何限制输入字段仅输入数字/位数int和float。 有时，我们需要为字段（如amount）同时允许整数和浮点值，因此在这种情况下需要进行验证。没有可用的解决方案，但它们的代码很大。因此，我们需要一个简短但有效的代码

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

只接受有效int和float值的输入框

对于数字输入限制，不需要长代码，只需尝试此代码即可

它还接受有效的int和float两个值

Javascript方法

onload=function（）{
var ele=document.querySelectorAll（'.number only'）[0]；
ele.onkeypress=功能（e）{
if（isNaN（this.value+“”+String.fromCharCode（e.charCode）））
返回false；
}
ele.onpaste=函数（e）{
e、 预防默认值（）；
}
}

只接受有效int和float值的输入框

---

一行解决方案#1:

将

与

步骤

属性一起使用

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

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

---

此RegExp接受以点（

）和/或负号（

-

）开头的数字。

第一件事优先。我更喜欢显示无效的击键，而不是阻止它们。用户体验堆栈交换目前似乎是一致的（）

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

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

• -
• ,
• -,

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

这让我们想到了（已经被拒绝的）

---

在文本框的onkeypress中调用一个jquery函数。

---

在该函数中，使用相应的ascii码来限制输入。

您可以在输入字段中添加一个

模式

属性。如果输入值与模式不匹配，可以使用css选择器设置输入字段的样式和/或显示错误消息

：invalid

：

。错误消息{
显示：无；/*默认情况下隐藏*/
}
.仅限编号：无效{
背景：粉红色；
}
.仅限编号：无效+。错误消息{
显示：内联；
}

请输入有效的整数或浮点值。

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

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

---

我不知道isNaN也会检查小数。投票赞成优雅。：）你知道这是否适用于代表用户输入的屏幕键盘或键盘助手吗？@SanuelJackson，谢谢。是的，这适用于屏幕键盘，您可以尝试操作系统的屏幕键盘，因为它捕获了相同的事件。通过键盘助手，你指的是浏览器的自动填充功能，而不是你需要一些额外的代码

.change（函数（e）{if（isNaN（this.value））this.value=“”；}）

OP可能不在乎，但这只适用于非负数。它不会接受-1。@GuySchalnat我当然会在乎的。。为什么不呢？但上述代码适用于最常见的情况，对于某些特殊情况，如允许使用负数，您还可以再添加一个条件，其余代码可以保持原样。@GuySchalnat更新了答案，以解决有关特殊情况（负数和显示无效击键）的问题。仅此答案上的脚注。这种输入类型只在HTML5中有效，这里没有什么重要的事情：1。这就是HTML5的功能2。每个浏览器3的外观和感觉不同。移动验证不可用4。对于提交时过多的验证，必须有表单标签将其包含在内。5.所有浏览器中的错误消息都不相同。。然后我必须继续比较每个无效键的ASCII代码，代码变得更大，但需要的是几乎所有用例覆盖率的最小代码函数是numberkey（evt）{var charCode=（evt.which）？evt.which:event.keyCode；if（charCode！=46&&charCode>31&（charCode<48|charCode>57））{return false；}else{return true；}}在文本框onkeypress中调用此方法。请参见此处的第一条注释，说明其限制。若应用程序只适用于支持HTML5的现代浏览器，那个么这将是可行的，但这段代码适用于对无效键输入并没有限制的现代浏览器，尽管它完全依赖于所需的UX，所以对于其他浏览器，需要有本机验证脚本。详细解释请向上投票混合（HTML5/Javascript）解决方案的优点是，一些移动设备提供了一个经过优化的软键盘，用于输入数字。