如何在输入[type="number"] 上使用模式？答案

【问题标题】：How to use a pattern on an input[type="number"]?如何在输入[type="number"] 上使用模式？
【发布时间】：2016-01-29 10:45:48
【问题描述】：

我希望默认值为 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" />

【问题讨论】：

标签： html css validation input

【解决方案1】：

Citing MDN on the pattern property（添加了突出显示）：

模式

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用 title 属性来描述帮助用户的模式。 这个当 type 属性的值为 text 时，属性适用，搜索、电话、网址或电子邮件；否则将被忽略。 常规表达式语言与 JavaScript 相同。图案不是被正斜杠包围。

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

【讨论】：

我也没有，所以我认为没有理由以这种方式验证数字输入。我还希望能够出于其他原因使用模式，例如检查数字是奇数还是偶数等。由于浏览器无法按照规范中的建议工作，我将提交错误报告。跨度>
WHATWG 规范有一个非规范表，总结了哪些属性适用于哪些输入类型。该表显示number 不在pattern 属性适用的输入类型中。 html.spec.whatwg.org/multipage/input.html#concept-input-apply
此外，规范指出“定义每种类型的小节还在规范的“簿记”部分中明确定义了这些功能中的哪些适用于每种类型，哪些不适用。”在Number State 的bookkeeping 部分下，它将pattern 列为不适用的属性之一。

【解决方案2】：

我看到如果你给最小值 1，颜色不是绿色为 0。当你输入 1 时颜色变为绿色。我想这就是你所期望的，对吧？

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

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

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

【讨论】：

不仅OP不需要需要 pattern，而且数字类型输入上的模式实际上是禁止的。它在the spec 中如此说明。对于您的空字段限制，只需添加 required 属性！