整数的HTML表单的输入类型

Question

下面的代码来自HTML表单.如果输入应该是整数,我是否需要更改"类型"？

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

Answer 1

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

通过添加step属性,可以将输入限制为整数.

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

Answer 2

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

Answer 3

这可能有所帮助:

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

step是为了方便(并且可以设置为另一个整数),但pattern做了一些实际的强制执行.

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

即使有这种向外紧凑的正则表达式,Chrome和Firefox的实现,有趣地允许在e这里(可能用于科学记数法)以及-负数,并且Chrome也允许,.而Firefox在拒绝时更严格,除非.仅仅是0.(Firefox在输入失去焦点时将该字段标记为红色,而Chrome不允许您首先输入不允许的值.)

因为,正如其他人所观察到的那样,应始终在服务器上(或在客户端上验证,如果在客户端本地使用该值或希望阻止用户往服务器的往返).

Answer 4

那这个呢：

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