如何通过正则表达式限制小数点位置 修复现有正则匹配错误

校验规则明确 #

• 仅允许输入数字，禁止英文字符及其他非数字类字符
• 整个字符串最多可出现1个小数点
• 禁止小数点出现在字符串开头，允许小数点出现在字符串末尾
• 合法示例：13.4、13.、纯整数如123；非法示例：单独的.、多个小数点如12.3.4、小数点开头如.123、含非数字字符如12a3

原有正则问题 #

初始写的/[^\d.]/g仅能过滤非数字、非小数点的字符，完全没有对小数点的出现次数、出现位置做限制，无法满足校验要求。

修正方案 #

根据使用场景二选一即可：

场景1：表单提交时整串合法性校验 #

用以下正则做全串匹配，匹配通过即为合法输入：

const numberValidateRegex = /^\d+(?:\.\d*)?$/;

// 测试用例结果
numberValidateRegex.test('13.4')  // true
numberValidateRegex.test('13.')   // true
numberValidateRegex.test('123')   // true
numberValidateRegex.test('.')     // false
numberValidateRegex.test('.12')   // false
numberValidateRegex.test('12.3.4')// false
numberValidateRegex.test('12a3')  // false

正则逻辑说明：

• ^匹配字符串起始位置，\d+要求开头必须是1位及以上数字，直接拦截小数点开头、空串、仅小数点的非法情况
• (?:\.\d*)?为可选匹配组：\.匹配小数点，\d*允许小数点后接0位或多位数字（支持小数点在末尾的场景），整组加?代表可以没有小数部分，兼容纯整数输入
• $匹配字符串结束位置，避免字符串中夹杂非法字符漏判

场景2：输入框实时输入过滤非法字符 #

如果需要在用户输入过程中实时拦截非法输入，用以下分步替换逻辑即可：

// 绑定在input事件中实时处理输入值
inputValue = inputValue
  .replace(/[^\d.]/g, '') // 第一步：清除所有非数字、非小数点的字符
  .replace(/^\./g, '') // 第二步：清除出现在开头的小数点
  .replace(/(\..*)\./g, '$1') // 第三步：仅保留第一个小数点，后续出现的所有小数点全部清除

该逻辑可以保证用户输入过程中就打不出非法字符，不需要等提交再校验。

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