Question

<input className="form-control" style={{ width: "8rem" }} type="text" min="0" max="23" pattern="^([1-2]?[0-9]|23)$"/>

我尝试使用正则表达式，但是允许我添加其他数字，例如超过23，不允许数字超过23输入文本框应仅允许1到23之间的数字

Answer 1

您似乎想要一个数字输入框而不是一个文本框。在这种情况下，您只需要使用min =“ 1”和max =“ 23”

<input classname="form-control" style="width:8rem" type="number" min="1" max="23">

我认为没有办法禁止用户在框中输入其他值，但是min和max应该自动验证输入，使其不成问题。有关更多信息，请查看MDN上的官方Web文档。它是所有与Web开发标准相关的官方goto资源。

顺便说一句，由于某种原因，您的样式属性的格式设置很奇怪，无法在常规网页上正常工作，因此我对其进行了修复。

Answer 2

使用数字输入（而不是文本输入）以及 min 和 max 属性是这种情况的正确解决方案，但是正如您提到的，它也可以用正则表达式模式解决。

您的正则表达式模式不适用于此目的，但是这种情况将：^([1-9]|1[0-9]|2[0-3])$

此模式基本上表明，值必须为1-9或1+0-9（10-19）或2+0-3（20-23），该值涵盖从1开始的每个数字-23。

如果您想将值限制在一定范围内，但也可以排除或允许其他值，那么使用正则表达式模式将是一个很好的解决方案。

示例：
^([0-9]|1[1-9]|2[1-3])$：限制为 1-23 ，但同时排除 10 和 20
^([0-9]|1[0-9]|2([0-3]|9)|39)$：限制为 1-23 ，但允许同时 29 和 39 < / p>