42

下面的代码来自一个 HTML 表单。如果输入应该是整数，我是否需要更改“类型”？

<div class="friend2title">
    <label for="url">Add points:</label>
</div> 
<div class="friend2field">
    <input name="state" type="text" id="state" maxlength="150">
</div>
4

8 回答 8

43 
<input type="number" step="1" ...

通过添加step属性，您可以将输入限制为整数。

当然，您也应该始终在服务器上进行验证。除了在严格控制的条件下，从客户那里收到的所有东西都需要被视为可疑。

于 2015-11-02T15:53:01.797 回答
26

这可能会有所帮助：

<input type="number" step="1" pattern="\d+" />

step是为了方便（并且可以设置为另一个整数），但pattern会进行一些实际的强制执行。

请注意，由于pattern匹配整个表达式，因此不必将其表示为^\d+$.

即使有这个表面上严格的正则表达式，Chrome 和 Firefox 的实现有趣地允许e这里（可能是科学记数法）以及-负数，Chrome 也允许，.而 Firefox 更严格地拒绝，除非.后面只有 0。（Firefox 在输入失去焦点时将该字段标记为红色，而 Chrome 不允许您输入不允许的值。）

因为，正如其他人所观察到的那样，应该始终在服务器上进行验证（如果在客户端本地使用该值或希望阻止用户往返于服务器，则也应在客户端上进行验证）。

于 2017-04-24T01:26:43.990 回答
22

如果您使用的是 HTML5，则应使用输入类型number。如果您使用的是 xhtml 或 html 4，则输入类型应为text.

于 2012-07-02T23:09:09.683 回答
3

在 HTML5 之前，input type="text"仅表示插入自由文本的字段，无论您想要什么。这是你必须做的验证工作，以保证用户输入一个有效的数字

如果您使用的是 HTML5，则可以使用新的输入类型，其中一种是自动验证文本输入的数字，并强制它为数字

但请记住，如果您正在构建服务器端应用程序（例如 php），您仍然需要验证该端的输入（确保它确实是一个数字），因为破解 html 和更改非常容易输入类型，删除浏览器验证

于 2012-07-02T23:12:48.603 回答
2

那这个呢：

<input type="number" step="1" onchange="this.value = parseInt(this.value);">

它只需要你写的任何内容，并尝试从中生成一个整数（如果它不能生成一个整数，它只会将其留空）。

另外，假设您要输入 0 到 20 之间的数字：

<input type="number" step="1" onchange="this.value = Math.max(0, Math.min(20, parseInt(this.value)));">

这样你就可以防止人们在边界之外写数字（这不会被你的标准min=和阻止max=）。

于 2021-09-03T13:14:32.763 回答
1

您应该将类​​型更改为数字如果您首先接受小数并在 keyUp 上删除它们，您可能会解决这个问题......

$("#state").on('keyup', function(){
    $(this).val($(this).val().replace(".", ''));
})

或者

$("#state").on('keyup', function(){
    $(this).val(parseInt($(this).val()));
})

这将删除句点，但没有“整数类型”。

于 2020-02-14T00:18:51.117 回答
0

不，这与输入的数据类型无关。它指定要创建的控件类型：

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI] 此属性指定要创建的控件类型。此属性的默认值为“文本”。

于 2012-07-02T23:11:40.287 回答
-8

即使您想接受数字作为输入，我也建议您使用该text类型。

<input type="text" name"some-number" />

客户端运行一些 jQuery 验证来验证它是一个数字。

然后在您的服务器端代码中，运行一些验证以验证它实际上是一个数值。

于 2012-07-02T23:13:46.463 回答