如何在input[type="number"]上使用模式？

Question

我希望默认值为0，如果输入的值大于0，使用:valid重新着色。我做错了什么吗？是谷歌浏览器出了问题还是HTML5规范有误？我想在不使用JS的情况下解决这个问题。

:valid {
  background: green
}

<p>This should not be green, but it is:</p>
<input max="100" min="0" pattern="^[1-9]\d*$" type="number" value="0" />

<p>Works perfectly, if the type is changed to text:</p>
<input pattern="^[1-9]\d*$" type="text" value="0" />

- Tamás Bolvári

Answer 1

引用 MDN 关于 pattern 属性的说明 （高亮部分已添加）：

pattern

检查控件值的正则表达式。该模式必须与整个值匹配，而不仅是某个子集。使用 title 属性来描述模式以帮助用户。当 type 属性的值为 text、search、tel、url 或 email 时才适用；否则将被忽略。 正则表达式的语言与 JavaScript 相同。该模式未用正斜杠包围。

有趣的是，在W3C和WhatWG标准中都找不到任何提及。

- Sirko

---

我也不知道，所以我认为数字输入不应该无法通过这种方式进行验证。我希望能够出于其他原因使用模式，例如检查数字是奇数还是偶数等。由于浏览器没有按照规范建议的方式工作，我将提交错误报告。 - Tamás Bolvári

WHATWG规范中有一个非规范性表格，总结了哪些属性适用于哪些输入类型。该表格显示number不是适用于pattern属性的输入类型之一。https://html.spec.whatwg.org/multipage/input.html#concept-input-apply - chharvey

此外，规范说明：“定义每种类型的子部分还在规范性的“簿记”部分中清楚地定义了哪些特性适用于每种类型，哪些不适用。”在Number State的簿记部分中，它列出了模式（pattern）作为一个不适用的属性。 - chharvey

Answer 2

我看到当你输入最小值1时，颜色不是绿色而是0。当你输入1时，颜色会变成绿色。我认为这就是你期望的，对吗？

基本上，你可以使用最小值和最大值进行验证。我认为你不需要使用模式。

<input max="100" min="1" type="number" value="0" />

这里有一个限制。如果您将字段留空，它仍然是绿色的！

- Ganesh Kumar

---

OP 不仅不需要 pattern，而且在数字输入时禁止使用 pattern。在 规范 中明确说明了这一点。至于空字段限制，只需添加 required 属性即可！ - chharvey