使用 HTML pattern 属性限制输入数字范围

本文介绍了如何使用 HTML5 的 `pattern` 属性，结合正则表达式，精确限制文本输入框允许输入的数字范围。我们将通过一个实际案例，演示如何限制输入框的格式为 "0-23,00|25|50|75"，即逗号前为 0 到 23 的数字，逗号后为 00、25、50 或 75 中的一个。

HTML5 引入的 pattern 属性，允许我们使用正则表达式来验证输入框的内容，从而实现对用户输入的有效限制。 这对于确保数据的准确性和一致性至关重要。

核心：pattern 属性与正则表达式

pattern 属性接受一个正则表达式作为其值。浏览器会自动将输入框的内容与该正则表达式进行匹配。如果匹配失败，则表单提交会被阻止，并可能显示一个错误提示（具体取决于浏览器）。

立即学习“前端免费学习笔记（深入）”；

实例：限制输入格式为 "0-23,00|25|50|75"

为了实现题目要求的格式限制，我们需要构建一个合适的正则表达式。以下是一个可行的方案：

<input type="text" name="morningS" class="morningS" id="morningS" required pattern="^[0-23]+,(00|25|50|75)$" title="Format should be 0-23 followed by a comma, then one of 00, 25, 50, or 75"/>

代码解析：

• ^: 表示字符串的开始。
• [0-23]+: 匹配 0 到 23 之间的数字。 注意： 实际上，[0-23] 匹配的是 0, 1, 2, 和 3 四个数字中的任意一个，再加上 + 表示匹配至少一个。 这并不是我们想要的。 正确的做法是使用 (0?[0-9]|1[0-9]|2[0-3])。
• ,: 匹配一个逗号。
• (00|25|50|75): 匹配 00、25、50 或 75 中的任意一个。 | 符号表示“或”。
• $: 表示字符串的结束。

改进后的代码：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

为了更精确地匹配 0-23 的数字，我们可以使用如下正则表达式：

<input type="text" name="morningS" class="morningS" id="morningS" required pattern="^(0?[0-9]|1[0-9]|2[0-3]),(00|25|50|75)$" title="Format should be 0-23 followed by a comma, then one of 00, 25, 50, or 75"/>

代码解析：

• ^: 表示字符串的开始。
• (0?[0-9]|1[0-9]|2[0-3]): 匹配 0 到 23 之间的数字。
  • 0?[0-9]: 匹配 0-9 的数字，允许 0 开头 (例如 01, 02, ..., 09)。
  • 1[0-9]: 匹配 10-19 的数字。
  • 2[0-3]: 匹配 20-23 的数字。
• ,: 匹配一个逗号。
• (00|25|50|75): 匹配 00、25、50 或 75 中的任意一个。 | 符号表示“或”。
• $: 表示字符串的结束。

title 属性的妙用

title 属性用于为元素提供提示信息。 在这里，我们将其设置为 "Format should be 0-23 followed by a comma, then one of 00, 25, 50, or 75"。 当用户输入的内容不符合 pattern 属性的要求时，浏览器可能会显示此提示信息，帮助用户了解正确的输入格式。 并非所有浏览器都支持此功能，但添加 title 属性总是一个好习惯。

注意事项：

• pattern 属性的验证是在客户端进行的。 为了确保数据的安全性，还应该在服务器端进行验证。
• 不同的浏览器对正则表达式的支持程度可能略有不同。 建议在主流浏览器上进行测试。
• 正则表达式的编写需要一定的技巧。 可以使用在线正则表达式测试工具来验证正则表达式的正确性。

总结

通过结合 pattern 属性和正则表达式，我们可以轻松地限制 HTML 输入框的输入格式，从而提高数据的质量和用户体验。 在实际开发中，应该根据具体的需求，选择合适的正则表达式，并进行充分的测试。 记住，客户端验证只是第一步，服务器端验证同样重要。

以上就是使用 HTML pattern 属性限制输入数字范围的详细内容，更多请关注php中文网其它相关文章！