小程序登录页面代码_微信小程序实现登录注册及其验证

因为一些原因，我就开始学习了小程序，这次做了一个登录一个注册页面，源码地址：https://gaoyixiang1.github.io/Lunch/

大概功能：

登录

• 在账户和密码都没有输入的情况下，页面不会跳转。
• 当登录成功和信息输入不全时都会有相应的提示
• 可以跳转至注册页面

注册

• 在全部信息都没有输入的情况下，不会跳转页面
• 在信息输入完全的情况下显示注册成功
• 用户返回到登录页面

效果图

登录.png

注册.png

登录代码

• wxml

账号 密码 登录 还未注册？去注册

• 验证部分

 region: function () { if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) { wx.showToast({ title: '请输入信息', icon: 'loading', duration: 2000 }) }else if(this.data.repwd!=this.data.password){ wx.showToast({ title: '密码有误', icon: 'loading', duration: 2000 }) } else { wx.showToast({ title: '注册成功', icon: 'success', duration: 2000 }) } }})

注册

• wxml

欢迎注册啊注册 

• 验证部分

 region: function () { if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) { wx.showToast({ title: '请输入信息', icon: 'loading', duration: 2000 }) }else if(this.data.repwd!=this.data.password){ wx.showToast({ title: '密码有误', icon: 'loading', duration: 2000 }) } else { wx.showToast({ title: '注册成功', icon: 'success', duration: 2000 }) } }})