微信小程序--验证码
时间：2021-03-07 发布者： 访问量：4673
手机号
验证码
{{getText2}}
绑定
.content {
width: 100%;
height: auto;
padding: 0 50rpx;
box-sizing: border-box;
}
.phone-box {
width: 100%;
height: 89rpx;
border-bottom: 1rpx solid #efefef;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.phone {
color: #333;
margin-right: 60rpx;
font-size: 28rpx;
}
.number {
color: #333;
font-size: 28rpx;
width: 200rpx;
}
.getNum {
width:210rpx;
height:48rpx;
background:rgba(248, 112, 57, 1);
border-radius:8rpx;
font-size:28rpx;
font-family:PingFang-SC-Medium;
color:rgba(255, 255, 255, 1);
line-height:48rpx;
margin-right:36rpx;
text-align:center;
}
.submit {
width: 480rpx;
height: 80rpx;
background: rgba(248, 112, 57, 1);
border-radius: 8rpx;
margin-top: 80rpx;
color: #fff;
font-size: 32rpx;
}
const app = getApp();
Page({
data: {
// 验证手机号
loginPhone: false,
loginPwd: false,
loveChange: true,
hongyzphone: '',
// 验证码是否正确
zhengLove: true,
huoLove: '',
getText2: '获取验证码',
},
// 手机验证
lovePhone: function (e) {
let phone = e.detail.value;
this.setData({ hongyzphone: phone })
if (!(/^1[34578]\d{9}$/.test(phone))) {
this.setData({
lovePhone: false
})
console.log(phone.length)
if (phone.length >= 11) {
wx.showToast({
title: '手机号有误',
icon: 'none',
duration: 1000
})
}
} else {
this.setData({
lovePhone: true
})
}
},
// 验证码输入
yanLoveInput: function (e) {
let that = this;
let yanLove = e.detail.value;
let huoLove = this.data.huoLove;
that.setData({
yanLove: yanLove,
zhengLove: false,
})
if (yanLove.length >= 4) {
if (yanLove == huoLove) {
that.setData({
zhengLove: true,
})
} else {
that.setData({
zhengLove: false,
})
wx.showModal({
content: '输入验证码有误',
showCancel: false,
success: function (res) { }
})
}
}
},
// 验证码按钮
yanLoveBtn: function () {
let loveChange = this.data.loveChange;
console.log(loveChange)
let lovePhone = this.data.lovePhone;
console.log(lovePhone)
let phone = this.data.hongyzphone;
console.log(phone)
let n = 59;
let that = this;
if (!lovePhone) {
wx.showToast({
title: '手机号有误',
icon: 'success',
duration: 1000
})
} else {
if (loveChange) {
this.setData({
loveChange: false
})
let lovetime = setInterval(function () {
let str = '(' + n + ')' + '重新获取'
that.setData({
getText2: str
})
if (n <= 0) {
that.setData({
loveChange: true,
getText2: '重新获取'
})
clearInterval(lovetime);
}
n--;
}, 1000);
//获取验证码接口写在这里
//例子 并非真实接口
app.agriknow.sendMsg(phone).then(res => {
console.log('请求获取验证码.res =>', res)
}).catch(err => {
console.log(err)
})
}
}
},
//form表单提交
formSubmit(e){
let val = e.detail.value
console.log('val', val)
var phone = val.phone //电话
var phoneCode = val.phoneCode //验证码
},
})
相关信息
用户评论
猜你喜欢
生活励志
生活文摘
生活福利
生活编程