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

原创已于 2022-08-23 16:16:21 修改 · 374 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #正则表达式

于 2022-08-23 16:06:00 首次发布

本文记录了一个前端开发中看似简单的需求——只允许输入数字，却在实现过程中遇到的各种问题。从最初的正则清理非数字字符，到使用Number转换导致的首位0限制和超长数字显示为科学计数法的问题，作者逐步完善解决方案，最终通过正则匹配成功清除首位0并解决了科学计数法问题。这个过程揭示了前端验证细节的重要性，并强调了不断学习和解决问题的必要性。

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

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

方案一：

// 对应数值输入时校验
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')
}

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