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