微信小程序：正则 input只能输入数字

最新推荐文章于 2025-03-13 11:20:06 发布

原创最新推荐文章于 2025-03-13 11:20:06 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

原生微信小程序专栏收录该内容

9 篇文章

订阅专栏

该博客探讨了在HTML中，`<input type=number>`无法限制输入仅为数字的问题。作者提出通过监听input事件，结合正则表达式校验并过滤用户输入，以确保手机号码字段只接受数字。这种方法虽然可能导致界面闪烁，但能有效实现限制。文章还提供了`handleInput`和`validateNumber`的示例代码来实现这一功能。

<input type="number" auto-focus focus='{{focus}}' value="{{value}}"  bindinput="handleInput" bindblur="validate" maxlength="11" placeholder="请输入十一位手机号码..." placeholder-style="font-size:3vw;"/>

需求是输入手机号，设置type为number只能拉起数字键盘，并不能限制其只能输入数字。因此我们需要通过其他的方法来做限制。

正则
为input绑定data中的value值，在input事件中监听输入的值。利用正则将其过滤然后重新setData更新value值，缺点就是输入非数字的值时界面会闪烁（重渲染）

handleInput(e) {
      let value = this.validateNumber(e.detail.value)
      this.setData({
        value
      })
    },
validateNumber(val) {
      return val.replace(/\D/g, '')
    },