如何实现十进制输入验证：禁止连续输入第二个小数点？

你的代码思路方向是对的，但问题出在判断条件的覆盖范围上——你只阻止了输入框为空时的小数点输入，却没检查当前输入框里已经存在小数点的情况。这就导致当输入框已有内容（比如123.）时，再按小数点会被允许，出现123..的问题。

修正后的核心代码方案 #

我们只需要判断当前输入值中是否已经包含小数点，就能精准阻止重复输入：

if (e.which === 190) {
  // 检查输入框中是否已经存在小数点
  if (value.includes('.')) {
    e.preventDefault();
    this.setState({ [error]: "Only one period allowed in decimal numbers!" });
    return false;
  }
}

增强兼容性（可选优化） #

考虑到部分用户会使用小键盘输入小数点，小键盘的小数点keyCode是110，可以同时兼容两种输入场景：

// 包含主键盘和小键盘的小数点keyCode
const decimalKeyCodes = [190, 110];
if (decimalKeyCodes.includes(e.which)) {
  if (value.includes('.')) {
    e.preventDefault();
    this.setState({ [error]: "Only one period allowed in decimal numbers!" });
    return false;
  }
}

如果需要禁止以小数点开头（保留原业务逻辑） #

如果你希望用户不能输入.5这种以小数点开头的数值，可以把原有的空值判断和小数点判断合并：

const decimalKeyCodes = [190, 110];
if (decimalKeyCodes.includes(e.which)) {
  if (value === '' || value.includes('.')) {
    e.preventDefault();
    this.setState({ [error]: "Only one period allowed in decimal numbers!" });
    return false;
  }
}

这样修改后，就能彻底阻止输入第二个小数点，完全符合你的业务需求啦～

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