问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

防止表单 input type="number" 中的负输入？

社区维基
1
新手上路，请多包涵

我想将用户输入限制为 html 表单中的正数。

我知道您可以设置 min=“0”，但是可以通过手动输入负数来绕过它。

有没有其他方法可以在不编写验证函数的情况下解决这个问题？

原文由 Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlformsinputnumbers
阅读 1.3k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这使用 Javascript，但您不必编写自己的验证例程。相反，只需检查 validity.valid 属性。当且仅当输入落在范围内时，这才会成立。

 <html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

原文由 Mikel Rychliski 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

如果不验证输入值，这是不可能的。

输入类型=数字

具有值为“number”的 type 属性的 input 元素表示用于将元素的值设置为表示数字的 字符串 的精确控件。

由于它是表示数字的字符串，因此无法确定该字符串是否表示数值。

Permitted 属性不会使您能够验证数字输入控件的值。

在 JavaScript 的帮助下执行此操作的一种方法可能如下所示。

 // Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)

 <input type="number" min="0" />

如果您计划将数据发送到服务器，请确保也验证服务器上的数据。客户端 JavaScript 无法确保发送的数据符合您的预期。

原文由 DavidDomain 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题