在写之前,我不得不说这是一个小的不能再小的点了,简直不能是坑,仅是我个人的学艺不精。
先上效果图(将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天后,谁知道呢~~~