界面设计
页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局
github地址:https://github.com/youzan/zanui-weapp
实现的功能
1.对用户输入的手机号码进行验证,利用正则表达式:
var reg = /^1[3|4|5|7|8][0-9]{9}$/
验证函数:
用户输入错误的手机号码时将会调用toast组件提示用户
getVerificationCode: function(e){
var reg = /^1[3|4|5|7|8][0-9]{9}$/
var phone = this.data.userPhone
var flag = reg.test(phone)
if(flag){
var that = this
var code
this.setData({
isValated: true
})
}
else{
Toast({
message: '请输入正确的手机号',
selector: '#zan-toast-test'
});
}
},
2.验证图片验证码(暂时为静态数据嘻嘻)
用户输入正确的手机号码后,会显示要求用户输入图片验证码进行验证,验证成功后将会下发短信验证码给用户的手机
// 图片验证码验证
ValatedCode: function(){
var code = this.data.valatedCode.toLowerCase()
if (code == '3n3d') {
this.setData({
isValated: false
})
Toast({
message: '验证码已发送',
selector: '#zan-toast-test'
});
this.getCode()
this.setData({
disabled: true
})
}
else {
this.setData({
isValated: false
})
Toast({
message: '图片验证码输入错误',
selector: '#zan-toast-test'
});
}
},
3. 实现发送验证码60s倒计时
var interval = null //倒计时函数
data: {
fun_id:2,
time: '获取验证码', //倒计时
currentTime:61,
userPhone: '',
isValated: false,
valatedCode: ''
},
getCode: function (options){
var that = this;
var currentTime = that.data.currentTime
interval = setInterval(function () {
currentTime--;
that.setData({
time: '已发送('+currentTime+'s)'
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
time: '重新发送',
currentTime:61,
disabled: false
})
}
}, 1000)
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
小程序登录注册,小程序登录
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“小程序登录/注册页面设计的实现代码”评论...
更新日志
2026年03月23日
2026年03月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]




