求匹配单一数字范围或逗号分隔数字列表的正则表达式

根据你的要求，文本框只能接受单一数字范围或逗号分隔的数字列表（不可混合），以下是满足所有验证规则的正则表达式，以及针对JavaScript/React的使用说明：

最终正则表达式 #

const validInputRegex = /^(?:\d+(?:\s*,\s*\d+)*\s*,?|\d+\s*-\s*\d+)$/;

正则规则拆解 #

这个正则通过|分割两种合法格式，确保输入只能匹配其中一种：

1. 逗号分隔数字列表（含单个数字、末尾允许带逗号） #

\d+(?:\s*,\s*\d+)*\s*,?

• \d+: 以至少一个连续数字开头（禁止空项或开头逗号）
• (?:\s*,\s*\d+)*: 允许零个或多个后续项，每个项前可带任意空格+逗号+任意空格
• \s*,?: 末尾允许带任意空格+可选逗号（比如1000, 2000,这种格式合法）

2. 单一数字范围 #

\d+\s*-\s*\d+

• \d+: 起始数字（连续数字，禁止中间空格）
• \s*-\s*: 连字符前后允许任意空格（支持1000-2000或1000 - 2000）
• \d+: 结尾数字（必须存在，禁止5000-这种不完整范围）

验证结果测试 #

针对你给出的示例，验证结果如下：

合法输入（返回true） #

• 1000
• 1000, 2000
• 1000 ,2000
• 1000, 2000,
• 1000,1000
• 1000 - 2000
• 1000-2000

非法输入（返回false） #

• ,1000, 2000（开头为逗号）
• 1000-2000, 3000-3500（混合范围与列表）
• 1000-2000, 3000（混合范围与列表）
• ,1000（开头为逗号）
• 1000 - 3 000（数字中间含空格）
• 5000-（不完整范围）
• 1000, 5000-6000（混合列表与范围）

React中使用示例 #

在React表单验证中，你可以在输入框的onChange或提交时使用test()方法验证：

import { useState } from 'react';

function NumberInput() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(true);
  const regex = /^(?:\d+(?:\s*,\s*\d+)*\s*,?|\d+\s*-\s*\d+)$/;

  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    setIsValid(regex.test(value));
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        style={{ borderColor: isValid ? '#ccc' : 'red' }}
      />
      {!isValid && <p style={{ color: 'red' }}>输入格式不合法，请输入单一数字范围或逗号分隔数字列表</p>}
    </div>
  );
}

export default NumberInput;

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