如何在HTML文本输入中使用正则表达式模式

Question

我希望在HTML5表单中限制文本输入字段。我需要它只接受1到5的值。

我的代码如下：

 <input type="text" name="count" pattern="[1-5][0-9-.]{1,10}" value="1" required>

匹配（期望）：

1
1.5
1.584
2
4.68756
5

不匹配（预期）：

0
.5
0.99
01
05
5.1
6
[a-zA-Z] and other special characters

现在出现的问题：

• 不能验证非小数值（1、2、3、4和5）。
• 可以验证5.1到5.9。

- Rafeeq Mohamed

---

@Wiktor Stribiżew，我的答案在哪里？请在标记为重复之前完全阅读问题。 - Rafeeq Mohamed

@Wiktor Stribiżew，现在我编辑了我的问题。 - Rafeeq Mohamed

尝试使用正则表达式 pattern="[1-4](?:\.\d+)?|5(?:\.0+)?"。 - Wiktor Stribiżew

谢谢，它完美地运行了。 - Rafeeq Mohamed

Answer 1

您可以使用

pattern="[1-4](?:\.\d+)?|5(?:\.0+)?"

它被HTML5引擎解析为^(?:[1-4](?:\.\d+)?|5(?:\.0+)?)$。请参见正则表达式演示。 详细信息

• ^(?: - 字符串的开头和一个非捕获组的开头
• [1-4] - 从1到4的数字
• (?:\.\d+)? - 可选的序列.和1个或多个数字（小数部分可以包含任意数量的任何数字）
• | - 或者
• 5 - 匹配5
• (?:\.0+)? - 可选的序列.和1个或多个零（如果整数部分是5，则小数部分可以包含任意数量的零）
• )$ - 外部“容器”组的结尾和字符串的结尾。

为了允许前导零，请使用

pattern="0*(?:[1-4](?:\.\d+)?|5(?:\.0+)?)"
         ^^^^^                          ^       

- Wiktor Stribiżew