CSS 输入：无效错误应用答案

【问题标题】：CSS input:invalid incorrectly appliedCSS 输入：无效错误应用
【发布时间】：2014-05-31 05:45:06
【问题描述】：

我有这个小提琴：

代码只是一个带有模式的数字类型的输入字段

pattern="[0-9]+(\.[0-9]+)?"

如果输入无效，CSS会添加一个红色边框：

input:invalid { border:1px solid red; }

但是，如果我键入 1.3，然后在该字段中使用制表符，我会得到一个红色边框，即使根据模式这是正确的。这里有什么问题？

PS：这是在 Safari 中。

编辑：好的，我添加了 step="any"，这似乎解决了它。各位能确认一下吗？

【问题讨论】：

你的小提琴对我来说很好用。在 1.3 上没有出现红色边框
Chrome 出现红色边框。
很奇怪。在 FF 中工作正常，但在 Chrome 中，我得到 1.3 的红色边框（应该没问题），但没有红色边框，只是 1.（应该是无效的）。我看不出正则表达式有什么问题。
很奇怪，我在 FF mobile 中没有得到任何输入的红色边框。 @Adam 1 是该模式的有效输入。
Chrome 似乎只接受整数。 “1.0”有效，但“1.1”、“1.3”等无效

【解决方案1】：

您已将输入定义为type=number。如本文所述，必须使用 step 属性明确允许浮点数才能正确验证。

在您的输入中添加一个步骤属性：step="any"：

<input type="number" name="quantity" class="form-control" placeholder="Quantity" tabindex="2" step="any">

另外，根据MDNpattern不适用于number类型：

当类型属性的值为文本时，该属性适用，搜索、电话、网址或电子邮件；否则忽略

【讨论】：

好的，在这种情况下，我还需要模式吗？所有浏览器都支持步进吗？我不想让，
我不认为在这种情况下使用pattern。如果您添加step="any"，任何浮点数都可以验证，例如1.2e-10。至于浏览器支持，所有主要浏览器的特定版本都支持它 - 请参阅链接的 MDN 页面了解哪些版本的详细信息
一个额外的潜在复杂性：并非所有语言都使用点作为小数分隔符（在瑞典和芬兰，他们使用逗号代替）。如果您的计算机使用这种文化，我不确定“数字”类型的行为如何 - 我本来希望它使用页面中的语言，而不是客户端，但尚未实际测试。有人吗？
@Adam 非常好的一点，从快速的谷歌搜索来看，无论语言环境如何，Chrome 都不允许使用逗号分隔符。期间;)