小程序如何设计登录/注册页面-创新互联
这篇文章主要介绍小程序如何设计登录/注册页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站-专业网站定制、快速模板网站建设、高性价比韶关网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式韶关网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖韶关地区。费用合理售后完善,10年实体公司更值得信赖。界面设计
页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局
实现的功能
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) },
以上是“小程序如何设计登录/注册页面”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:小程序如何设计登录/注册页面-创新互联
URL链接:http://lswzjz.com/article/pidgp.html