整数的 HTML 表单的输入类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11302360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input type for HTML form for integer
提问by John
The code below is from an HTML form. If the input is supposed to be an integer, do I need to change the "type'?
下面的代码来自 HTML 表单。如果输入应该是整数，我是否需要更改“类型”？
<div class="friend2title">
<label for="url">Add points:</label>
</div>
<div class="friend2field">
<input name="state" type="text" id="state" maxlength="150">
</div>
回答by Kivi Shapiro
<input type="number" step="1" ...
By adding the stepattribute, you restrict input to integers.
通过添加step属性，您可以将输入限制为整数。
Of course you should always validate on the server as well. Except under carefully controlled conditions, everything received from a client needs to be treated as suspect.
当然，您也应该始终在服务器上进行验证。除了在严格控制的条件下，从客户那里收到的一切都需要被视为可疑。
回答by gcochard
If you're using HTML5, you should use the input type number. If you are using xhtml or html 4, input type should be text.
如果您使用 HTML5，则应使用输入类型number。如果您使用的是 xhtml 或 html 4，则输入类型应为text.
回答by Brett Zamir
This might help:
这可能有帮助：
<input type="number" step="1" pattern="\d+" />
stepis for convenience (and could be set to another integer), but patterndoes some actual enforcing.
step是为了方便（并且可以设置为另一个整数），但pattern会执行一些实际的执行。
Note that since patternmatches the whole expression, it wasn't necessary to express it as ^\d+$.
请注意，由于pattern匹配整个表达式，因此没有必要将其表示为^\d+$.
Even with this outwardly tight regular expression, Chrome and Firefox's implementations, interestingly allow for ehere (presumably for scientific notation) as well as -for negative numbers, and Chrome also allows for .whereas Firefox is tighter in rejecting unless the .is followed by 0's only. (Firefox marks the field as red upon the input losing focus whereas Chrome doesn't let you input disallowed values in the first place.)
即使使用这种外部紧密的正则表达式，Chrome 和 Firefox 的实现有趣地允许e此处（大概用于科学记数法）以及-负数，并且 Chrome 也允许.而 Firefox 在拒绝方面更严格，除非.后面仅跟 0。（Firefox 在输入失去焦点时将该字段标记为红色，而 Chrome 不允许您首先输入不允许的值。）
Since, as observed by others, one should always validate on the server (or on the client too, if using the value locally on the client or wishing to prevent the user from a roundtrip to the server).
因为，正如其他人所观察到的，应该始终在服务器上进行验证（如果在客户端本地使用该值或希望防止用户往返于服务器，则也应在客户端上进行验证）。
回答by Naps62
Prior to HTML5, input type="text"simply means a field to insert free text, regardless of what you want it be. that is the job of validations you would have to do in order to guarantee the user enters a valid number
在 HTML5 之前，input type="text"只是意味着一个用于插入自由文本的字段，无论您想要什么。这是您必须执行的验证工作，以确保用户输入有效数字
If you're using HTML5, you can use the new input types, one of which is numberthat automatically validates the text input, and forces it to be a number
如果您使用HTML5，你可以使用新的输入类型，其中之一是数量，可以自动验证文本输入，并迫使它是一个数字
keep in mind though, that if you're building a server side app (php for example) you will still have to validate the input on that side (make sure it is really a number) since it's pretty easy to hack the html and change the input type, removing the browser validation
但是请记住，如果您正在构建服务器端应用程序（例如 php），您仍然需要验证该端的输入（确保它确实是一个数字），因为它很容易破解 html 并进行更改输入类型，删除浏览器验证
回答by Mahmoud Gamal
No, it is not about the data type of input. It specifies the type of control to create:
不，这与输入的数据类型无关。它指定要创建的控件类型：
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI] This attribute specifies the type of control to create. The default value for this attribute is "text".
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI] 此属性指定要创建的控件类型。此属性的默认值为“text”。
回答by leenbean16
You should change your type to number If you accept decimals first and remove them on keyUp, you might solve this...
您应该将类型更改为数字如果您先接受小数并在 keyUp 上删除它们，您可能会解决这个问题...
$("#state").on('keyup', function(){
$(this).val($(this).val().replace(".", ''));
})
or
或者
$("#state").on('keyup', function(){
$(this).val(parseInt($(this).val()));
})
This will remove the period, but there is no 'Integer Type'.
这将删除句点，但没有“整数类型”。
回答by Only Bolivian Here
Even if you want to accept numbers for the input, I would recommend using the texttype.
即使您想接受数字作为输入，我也建议使用该text类型。
<input type="text" name"some-number" />
Client-side run some jQuery validations to verify it's a number.
客户端运行一些 jQuery 验证来验证它是一个数字。
Then in your server side code, run some validation to verify it is in fact a numerical value.
然后在您的服务器端代码中，运行一些验证以验证它实际上是一个数值。
