微信小程序input输入数据为数字

一、简介

在做项目的时候，我们经常会碰到一些特殊的数据，如在输入数据时，要求输入电话号码而电话号码全是数字，输入某物品的数量，输入值肯定是正整形数字，这篇文章就是教你怎么处理这种情况的数据。

二、效果图：

三、代码：

wxml：

<view class="box">
  <button class="button" bindtap="jian">-</button>
  <input class="input" type="number"  bindinput="number"  value='{{number}}' ></input>
  <button class="button" bindtap="jia">+</button>
</view>

wss：

.box{
  display: flex;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.button{
  background-color: darkorange;
  width: 100rpx;

}
.input{
  width: 150rpx;
  border: 2rpx solid black;
  height: 100rpx;
  text-align: center;
  font-size: 50rpx;
}

js：

// miniprogram/pages/business/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    number:0
  },
 
  number: function (e) {
    let value = this.validateNumber(e.detail.value)
    console.log(e.detail.value)
    this.setData({
      //parseInt将数字字符串转换成数字
      number: parseInt(value)
    })
  },
  validateNumber(val) {
    //正则表达式指定字符串只能为数字
    return val.replace(/\D/g, '')
  },
  jian: function () {
    if (this.data.number <= 0) {
      this.setData({
        number: 0
      })
    } else {
      this.setData({
        number: this.data.number - 1
      })
    }

  },
  jia: function () {
    var value = this.data.number
    this.setData({
      number: value + 1
    })
  },
  
})