前端输入框正整数校验逻辑

正则表达式

校验是否为正整数的正则表达式为：/^[1-9]\d*$/

校验方法

使用正则表达式的 test(字符串) 方法可以校验一个字符串是否符合要求

正则表达式是用来校验字符串的，所以必须传入字符串，如果传入数值会进行类型转换。

验证逻辑（非统一逻辑）

• 输入格式为 x.xxxx：应提示为非正整数；
• 输入格式为 x.0：应提示为非正整数；
• 输入 0：应提示为非正整数；
• 输入格式为 0...0xxxxxx （中间是省略号）时，应先去掉首端的0再校验；

处理首端0的方法

将字符串转化为数值类型

// 根据情况使用转化方法
parseFloat(str)
parseInt(str)
Number(str)
str - 0

这种方法最简单，但是可能会产生一些问题。如果你的校验逻辑里对于整数的要求比较严格，不能出现小数点，如 5.0 为校验不通过，那么这种方法就有问题，因为字符串的 5.0 转化成数值后就变成 5 了。

使用字符串的 slice 截取方法

这种方法就是首先截取字符串的第一个字符，判断是否为0，如果是，则从第二位截取到末尾，然后重复这个逻辑；如果不是直接使用。

sliceStr(str) {
  if (str.slice(0, 1) == 0) {
    return this.sliceStr(str.slice(1))
  } else {
    return str
  }
},
const finalNum = this.sliceStr(str) 
/^[1-9]\d*$/.test(finalNum)

使用字符串的 replace 方法结合正则来替换

使用 replace 方法跟正则将字符串首端的 0 替换成空字符串，这样做避免了上面那样重复判断的逻辑。

const finalNum = str.replace(/^0+/, '')
/^[1-9]\d*$/.test(finalNum)

上面两种方法都会产生新的问题：

• 输入 0：会替换成空字符串 ''；
• 输入小数 0...0.x：会变成 .x

我们也可以使用代码来进行特殊处理，但是这两种情况不影响校验。

因为 ：

• test方法对于 0 跟空字符串 '' 都会返回 false ;
• 而 .x 在代码层面跟小数 0.x 是等价的;