仅正整数输入的 Javascript 验证

Posted 2023-03-05

【中文标题】仅正整数输入的 Javascript 验证

【英文标题】：Javascript Validation for Positive Integer Only Input

【发布时间】：2014-03-06 00:40:03

【问题描述】：

我有两个文本框，其中只允许使用正整数。 如果输入了任何字母值或任何其他字符（例如 %$&*£"），则应显示错误消息并且这些值不得呈现表格。

 <input type="button" value="total" name="B3" onclick="powerOf();">

此行允许进行计算，此验证如何阻止这种情况发生 输入错误值时？截至目前，已计算出负数，输入字母会产生一个空表，这不是我想要的：

(no1== no1.match(/^-\d+$/) ? alert("First number must be positive"): no1 = no1 ? no1 : 0);
        (no2== no2.match(/^-\d+$/) ? alert("Second number must be positive"): no2 = no2 ? no2 : 0)

        var range1 = parseInt(no1);
        var range2 = parseInt(no2);

有什么想法吗？

【问题讨论】：

验证码在哪里？

您想推出自己的验证库还是使用现有的验证库？

这个问题已经被问过了here

@Pointy 因为我是初学者，我所拥有的东西非常无用，但还是发布了它

【参考方案1】：

注意：您可以通过 html5 表单验证简单地做到这一点：

<input type="number" min="1">

除非输入的值大于 1，否则您将无法提交表单。不过，这似乎只适用于 Chrome。

---

要回答您的问题，您要查找的是event.preventDefault()。如果您将 onclick 函数更改为：

 <input type="button" value="total" name="B3" onclick="powerOf(event);">

然后您可以在powerOf 函数中运行event.preventDefault()，当您运行该函数时，该事件将被“取消”。例如：

function powerOf(event) 
    if (!/^\d+$/.test(document.getElementById('input-1').value)) 
        event.preventDefault();
    

当id="input-1" 的输入值仅为非位时，将取消点击事件。

有关工作示例，请参阅 this demo。

【讨论】：

Firefox 26.0 非常乐意提交带有“数字”<input> 字段的值不是数字的表单。

@Pointy 这很奇怪，我刚刚检查了caniuse.com/form-validation，它说 FF 应该支持它。虽然在testing it myself 之后，它确实似乎工作得很好，甚至没有将输入识别为 CSS-:invalid。我已经更新了我的答案（它似乎在 IE11 中也不起作用）。

是的，它可以在 Chrome 中使用。我个人觉得 Chrome 中的“数字”输入实现非常丑陋，所以我只在触摸屏设备上使用“数字”，因为它也会影响屏幕键盘布局。

@Pointy this answer 显然可以解决问题：demo。 （通过this answer 获得该链接）与现在仅使用type="text" 相比，优势在于您可以通过向上和向下箭头键以及Chrome 中的表单验证来增加和减少。

@Joeytje50 验证似乎正在工作，但 preventDefault 没有遵循您的指示。