Vue el-input 校验输入数字和小数点，首位数字不能为0

为了使这个函数能够处理小数点输入，我们需要调整验证逻辑。我们可以允许用户输入数字和小数点，但要确保输入符合以下规则：

1. 只允许数字和最多一个小数点。
2. 小数点不能出现在数字的开头。
3. 小数点只能出现一次。
4. 如果输入的是非数字和非小数点字符，则删除最后一个字符。

根据这些规则，下面是修改后的代码：

handleInput(value) {
  // 只允许输入数字和一个小数点
  if (!/^\d*\.?\d*$/.test(value)) {
    this.formData.totalAmount = value.slice(0, -1) // 如果输入的是非数字或多个小数点，删除最后一个字符
    return
  }

  // 当输入两位数字时，首位不能为 0
  if (value.length === 2 && value[0] === '0' && value[1] !== '.') {
    this.formData.totalAmount = value.slice(1) // 去掉首位的0
  }

  // 防止输入多个小数点
  const dotCount = (value.match(/\./g) || []).length
  if (dotCount > 1) {
    this.formData.totalAmount = value.slice(0, -1) // 如果输入多个小数点，删除最后一个字符
  }
}

解释：

1. 正则表达式 /^\d*\.?\d*$/：

   • \d*：匹配数字（可以是零个或多个）。
   • \.?：允许有一个小数点（可以没有或最多一个）。
   • \d*：小数点后面可以是零个或多个数字。

2. 去掉首位的0：

   • 通过 value.length === 2 && value[0] === '0' && value[1] !== '.' 来确保只有在首位是0且第二位不是小数点时，才去掉首位的0。

3. 限制小数点数量：

   • 使用 const dotCount = (value.match(/\./g) || []).length 来检查输入中小数点的数量。如果数量超过1，则删除最后一个字符。

示例：

• 输入 0123 会变成 123。
• 输入 1.23 会保持不变。
• 输入 123.45.67 会删除最后一个小数点后的部分，变为 123.45。

这个修改可以确保你能够正确地输入数字和小数点，并且避免不合法的输入。

原文地址：https://blog.csdn.net/huang3513/article/details/144025885

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！