正则错误排查及JS实现输入框仅允许两个分数，能否用HTML5 pattern？

绝对可以用HTML5的pattern属性搞定这个需求！我来给你一步步说明怎么实现：

核心思路 #

我们需要构造一个正则表达式，确保输入内容恰好包含两个符合数字/数字格式的分数，且没有多余的内容或额外的分数。

正则表达式示例（分场景） #

根据你希望的分数分隔方式，这里提供两种常用的正则：

1. 逗号+可选空格分隔（支持1/2, 4/6或123/456,789/012这类格式）

   ^\d+/\d+\s*,\s*\d+/\d+$
   

2. 空格分隔（支持1/2 4/6这类格式）

   ^\d+/\d+\s+\d+/\d+$
   

正则各部分解释 #

• ^ 和 $：强制匹配整个输入字符串，避免出现第三个分数或多余字符
• \d+：匹配1个或多个数字（支持多位数的分子/分母，比如123/456）
• /：匹配分数中的斜杠（在HTML的pattern属性中不需要转义）
• \s*,\s*：匹配逗号分隔符，前后允许任意数量的空格（包括零个）
• \s+：匹配至少一个空格作为分隔符

完整HTML代码示例 #

<label for="two-fractions">输入两个分数（示例：1/2, 4/6）：</label>
<input
  type="text"
  id="two-fractions"
  pattern="^\d+/\d+\s*,\s*\d+/\d+$"
  title="请输入两个合法的分数，格式如「1/2, 4/6」或「123/456,789/0」"
  required
>

补充说明 #

• 如果需要支持带负号的分数（比如-1/2, 3/-4），可以把正则调整为：

  ^-?\d+/\-?\d+\s*,\s*-?\d+/\-?\d+$
  

• 注意：前端的pattern验证只是用户体验层面的优化，不能替代后端校验，恶意用户可以绕过前端验证，所以后端处理时一定要再做一次格式检查。

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