输入框只能输入数字遇到的坑

概述：遇到一个需求，输入框里只能输入数字，这个需求很正常是吧，没想到居然也遇到了坑...

其实遇到这个需求，我也没想太多，觉得很简单，键盘敲打

方案一：

// 对应数值输入时校验
onInput() {
  // 清空数字以外的字符
  this.value = this.value.replace(/\D/g, '')
}

以为解决~

but（万恶的转折），经过测试发现，我可以输入‘0000000’，额，这就尴尬了，严格意义上说是不可以这样的，所以出现隐藏需求，首位不能一个或者多个0，单个0除外

于是我想起Number()这个函数，于是

方案二：

// 对应数值输入时校验
onInput() {
    // 清空数字以外的字符
    this.value = this.value.replace(/\D/g, '')
    // 转成数字
    this.value = Number(this.value)
}

以为解决~

but（再次转折），经过测试发现，即使清空，Number('')返回的是0，即不能清空，清空显示0

额，好吧，大意了，这个好解决，加个三目运算

方案三：

// 对应数值输入时校验
onInput() {
    // 清空数字以外的字符
    this.value = this.value.replace(/\D/g, '')
    // 转成数字
    this.value = this.value === '' ? '' : Number(this.value)
}

这下完美解决了吧~

but（啊啊啊啊，又出现转折），经测试，偶然发现，如果你输入的数字太长，比如’1111111111111111111111‘，Number之后就会变成

’1.1111111111111111e+21‘，泪崩。。。为何这么搞我，还是老老实实正则匹配吧

因为正则不是很熟，所以网上搜索一番，写出下面方案

方案四：

// 对应数值输入时校验
onInput() {
    // 清空数字以外的字符
    this.value = this.value.replace(/\D/g, '')
    // 清除数字前面的0，只有一位0除外
    this.value = this.value.replace(/0*(\d+)/,'$1')
}

这下才完美解决，不容易啊，没想到一个普普通通的需求居然这么多坑，学海无涯，共勉之