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

xiaoxiao2025-09-12  310

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

先上效果图(将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天后,谁知道呢~~~

转载请注明原文地址: https://www.6miu.com/read-5036205.html

最新回复(0)