求可限制<input>标签输入为指定格式的合规正则表达式

首先明确你需要限制的合法单元仅有以下4种，所有输入必须是这些单元用英文逗号,分隔的组合（不能有首尾逗号，单元之间不能连续多个逗号）：

• 单个正整数：比如 1、100
• 取反的单个正整数：比如 !2、!123
• 正整数范围：比如 [1-2]、[10-200]
• 取反的正整数范围：比如 ![1-4]、![30-50]

针对这个规则，正确的正则表达式如下：

^(?!,)(?:!\d+|!\[\d+-\d+\]|\d+|\[\d+-\d+\])(?:,(?:!\d+|!\[\d+-\d+\]|\d+|\[\d+-\d+\]))*$

嵌入到<input>标签的写法：

<input type="text" pattern="^(?!,)(?:!\d+|!\[\d+-\d+\]|\d+|\[\d+-\d+\])(?:,(?:!\d+|!\[\d+-\d+\]|\d+|\[\d+-\d+\]))*$" title="请输入合法格式，例如：1、1,2,3、!2,!3、[1-2]、![1-4],1,!7等">

正则规则拆解 #

• ^(?!,)：确保输入开头不会是逗号
• (?:!\d+|!\[\d+-\d+\]|\d+|\[\d+-\d+\])：匹配单个合法单元，四种类型任选其一：
  • !\d+：匹配!加至少一位数字的结构
  • !\[\d+-\d+\]：匹配!加方括号包裹的数字-数字范围结构
  • \d+：匹配至少一位数字
  • \[\d+-\d+\]：匹配方括号包裹的数字-数字范围结构
• (?:,(?:...))*：匹配零个或多个「逗号+合法单元」的组合，保证单元之间只用单个逗号分隔，且输入结尾不会出现逗号

原正则失效原因 #

你之前的正则只是松散地允许字符组合，没有约束每个单元的完整结构——既没禁止连续的!、-或逗号，也没限定方括号内必须是数字-数字的合法格式，所以会放行各种乱输入的非法字符串。

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