正则表达式只允许数字和最多 2 位数字答案

【问题标题】：Regex to allow only numbers and max 2 digits正则表达式只允许数字和最多 2 位数字
【发布时间】：2021-10-08 04:07:35
【问题描述】：

我正在处理一个输入字段，它应该允许用户输入从 0 到 99 的数字。此外，不应允许用户输入第三位数字。

为了解决上述问题，我有以下正则表达式 /^([0-9]{2})$/

我有以下按键事件触发的功能

    onlyAllowNumbers(evnt: KeyboardEvent): boolean {
        const charCode = evnt.key;
        const pattern = /^([0-9]{2})$/;

        return pattern.test(charCode);
}

上述模式不允许我在输入字段中输入任何数字。

【问题讨论】：

因为输入的是单个字符。
<input type="number" min="0" max="99"> 怎么样？
type=number 在 Firefox 中不起作用，而且用户仍然可以输入超过 2 位的数字
如果你对数字长度有严格的要求，你不应该忘记在服务器端检查它，输入字段和 JavaScript 都可以被用户绕过。

标签： javascript regex typescript

【解决方案1】：

您必须使用事件值，我建议在代码中使用正则表达式，数字的事件键与正则表达式不匹配，因为“1”只有一位数

//evnt.key will return you the key pressed value

onlyAllowNumbers(evnt: KeyboardEvent): boolean {
        const value = evnt.target.value;
        const pattern = /^\d{2}$/;

        return pattern.test(value);
}

【讨论】：

【解决方案2】：

我建议更新正则表达式以允许 0 或 2 位数字 - /^[0-9]{0,2}$/。

以下值将匹配：''、'0'、'1'、...'10'、...'99'。

keypress事件有以下字段：

event.target.value - 按下新键之前的输入值
event.key - 按下的键的字符串值

当event.target.value 和event.key 组合在一起时，我们可以估计输入的新值。

event.preventDefault() 调用可用于在结果值与所需模式不匹配时阻止按键事件。

document.getElementById('myinput').addEventListener('keypress', event => {
    if (!`${event.target.value}${event.key}`.match(/^[0-9]{0,2}$/)) {
        // block the input if result does not match
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
});

&lt;input id="myinput" type="text" value="" /&gt;

【讨论】：

【解决方案3】：

大概你会想在一个表单中使用它。如果您的目标是现代浏览器，input 字段支持 pattern 属性，该属性添加了额外的模式强制层（以防 JavaScript 被禁用）。

如果您正在考虑最佳用户体验，您还需要预测不太常见的用例。例如：如果用户选择其中一个数字并键入另一个数字，则表示他们正在用新数字替换所选数字。

以下代码考虑了所有这些：

<form>
  <input id="only_max_two_digits" type="text" pattern="^\d{1,2}$" />
  <input type="submit" />
</form>

<script type="text/javascript">
  function remove_substr(s, src, dst) {
    return s.substr(0, src) + s.substr(dst);
  }

  document
    .querySelector("#only_max_two_digits")
    .addEventListener("keypress", (e) => {
      const { value, pattern, selectionStart, selectionEnd } = e.target;
      const next = remove_substr(value, selectionStart, selectionEnd) + e.key;

      if (!new RegExp(pattern).test(next)) {
        e.preventDefault();
      }
    });
</script>

函数remove_substr 从两个给定数值范围之间的字符串中删除一个子字符串。在这种情况下，我们使用它来删除选定的文本，因为我们知道选择的开始和结束位置。

事件监听器：

由keypress事件触发，表示按键按下，但<input>的值尚未更新。
next 变量包含对下一个值的估计值，方法是 1) 删除当前选定的文本（如果有）并附加正在按下的键的值。
如果next 变量的值未通过正则表达式模式测试，则<input> 将无法更新。

这是一个有效的 CodeSandbox 示例。

【讨论】：