小程序填坑之路--弹窗修改手机号后的更新（已解决）

在写之前，我不得不说这是一个小的不能再小的点了，简直不能是坑，仅是我个人的学艺不精。

先上效果图（将2输入框的手机号替换掉1输入框的手机号）：

（都是在js文件里进行操作）

首先在data里 ，定义cellPhone=" "

data{ cellPhone: '', }

1号输入框 的值是读取的用户登录（本次小程序登录采用手机号注册登录）后的缓存：

 // 手机号部分  
  getPhoneNum: function(e) {
    var that = this;
    var cellPhone = that.data.cellPhone
    if (cellPhone.length === 11) {
      var checkedNum = this.checkPhoneNum(cellPhone)
      if (checkedNum) {
        this.setData({
            cellPhone: cellPhone
          }),
          console.log('phoneNum' + this.data.cellPhone)
      }
    }
  },

 //检验手机号格式
  checkPhoneNum: function (cellPhone) {
    var str = /^1\d{10}$/
    if (str.test(cellPhone)) {
      return true
    } else {
      wx.showToast({
        title: '手机号不正确',
      })
      return false
    }
  },

其中的checkPhoneNum是我写的一个校验手机号的函数方法，算了，一起附在代码上吧。

这个时候的cellPhone是1号输入框的值。

2号输入框 的值输入后，要将这个newCellPhone外放出来，才能被数据捕捉到。

  //修改后的手机号
  getNewPhoneNum: function(e) {
    this.setData({
      newCellPhone: e.detail.value
    })
    console.log("修改后的手机号是" + this.data.newCellPhone)
  },

接下来在 弹出框的确定按钮 上，进行校验事件

  //点击更改手机号的确定
  reviseTap: function(e) {
    var that = this;
    if (that.data.newCellPhone && that.data.verifyCode) {
      var cellPhone = that.data.newCellPhone;
      var currentStatu = e.currentTarget.dataset.statu;  //可以忽略，这个是弹窗关闭
      this.util(currentStatu)  //可以忽略，这个是弹窗关闭 
      this.setData({
        cellPhone: cellPhone    //这个是重点（敲黑板！敲黑板！！）
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '请完善修改信息',
      })
    }

标注的重点是说：在 var cellPhone = that.data.newCellPhone; 就已经把新输入的手机号赋值给了cellPhone，说是重点，其实就是把这个cellPhone外放了，这样在我们看到的手机号就可以更新了。

在这里是要说明的是：整个手机号替换是页面中的传值，看起来是弹窗，但我并没有调用微信给的弹窗的组件，是我自己写的方法。

还有就是，这里的校验手机号在我看来有点鸡肋，毕竟还有短信验证码，这个……还是带着吧。

下一次写短信吧……我也不知道下一次还要多久，可能是5多分钟后，可能是5天后，谁知道呢~~~

小程序填坑之路--弹窗修改手机号后的更新（已解决）

猜你喜欢