HTML输入框逗号分隔单小数点十进制数pattern正则校验求助

规则明确 #

校验逻辑必须满足以下要求：

• 分隔符仅允许使用英文半角逗号(,)
• 逗号总数最多3个，即最多支持4个十进制数
• 单个数字内最多允许1个小数点.，不允许出现多小数点、小数点孤立无数字的情况
• 合法输入示例：100.10,100.20,100.30

你原有正则pattern="([0-9]{,1}[,])([0-9]{,1}[,])([0-9]{,1})"存在核心逻辑错误：不规范的量词{,1}实际仅能匹配最多1位数字，完全无法覆盖多位整数、小数场景，也未对小数点合法性、逗号总数做约束，无法满足校验要求。

可用实现代码 #

直接在input标签的pattern属性中使用以下正则即可，配合title属性可在校验失败时给用户明确提示：

<input 
  type="text" 
  pattern="^\d+(\.\d+)?(,\d+(\.\d+)?){0,3}$"
  title="请输入英文逗号分隔的十进制数，最多3个逗号，单个数字最多1个小数点"
>

正则逻辑说明 #

• ^、$分别锚定输入内容的开头和结尾，杜绝首尾非法字符、内容中间夹杂无关字符的问题
• \d+(\.\d+)?匹配单个合法十进制数：先匹配1位及以上整数部分，再可选匹配「小数点+1位及以上小数」的结构，从规则层面直接禁止单个数字出现多个小数点、小数点前后无有效数字的问题
• (,\d+(\.\d+)?){0,3}匹配逗号后跟随的十进制数，{0,3}限制该结构最多出现3次，加上开头的第一个数字，整体最多包含3个逗号、4个数字，完全符合数量限制要求

校验覆盖范围 #

可正常通过的合法输入 #

• 纯整数输入：100,200,300,400
• 整数小数混合输入：100,200.55,30,400.1
• 逗号数不足3个的输入：12.34、12,34.56、1.1,2,3.45

会被拦截的非法输入 #

• 逗号总数超过3个：1,2,3,4,5
• 单个数字含多个小数点：100.1.2,200
• 含中文逗号、字母、特殊符号：100，200、100a,200
• 小数点前后无有效数字：100.,200、.100,200
• 首尾多余逗号：,100,200、100,200,

内容的提问来源于stack exchange，提问作者David Nicolas Gomez