JavaScript及React中自定义页码范围校验的正则模式如何实现？

正则场景说明 #

1. 最终提交校验（仅匹配完整合法格式） #

可匹配合法格式：

• 单个页码：1
• 混合单个页码和页码范围：1, 4-5
• 多组逗号分隔的页码/范围：1, 4-5, 8, 11, 13-14

不可匹配错误格式：

• 连续逗号：1,,,,
• 末尾多余横杠：1, 4-5-
• 连续横杠+多余逗号：1, 4--------2233-----,,,,

对应的正则表达式：
/^\d+(?:-\d+)?(?:, *\d+(?:-\d+)?)*$/ #

2. 实时输入校验（允许输入过程中末尾临时保留逗号、横杠） #

支持用户输入未完成时的临时状态，比如输入1,等待后续页码、输入12-等待后续结束页码的场景均可通过校验。

对应的正则表达式：
/^\d+(?:-\d*|,? *)*$/ #

React 校验实现示例 #

// 实时输入校验，拦截非法字符输入
const customPageInputChange = (e) => {
  if(e.target.value.match(/^\d+(?:-\d*|,? *)*$/) !== null) {
    setCustomPage(e.target.value)
  }
}

// 提交时做最终格式校验
const handleSubmit = () => {
  const submitRegex = /^\d+(?:-\d+)?(?:, *\d+(?:-\d+)?)*$/
  if (!submitRegex.test(customPage.trim())) {
    alert('页码格式错误，请参考示例：1, 4-5, 8')
    return
  }
  // 后续业务逻辑
}

内容的提问来源于stack exchange，提问作者nitin premanand