微信小程序（七）注册

enroll.wxml

<!--pages/enroll/enroll.wxml-->
<view wx:if="{{!success}}"><view class='row'><view class='info'><input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" /></view><!--<button class='button1' bindtap='doGetCode' disabled='{{disabled}}' style="background-color:#33FF99" >{{text}}</button>--></view><view class='row'><view class='info'><input  class= 'info-input' bindinput="handleVerificationCode" placeholder="请输入你的验证码" /></view></view><view class='row'><view class='info'><input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="请输入你的密码" /></view></view><view class='row'><view class='info'><input  type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="请重新输入你的密码" /></view></view><button class='submit' bindtap='submit'>提交</button></view><view class = 'success' wx:if="{{success}}"><view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!</view><button type = "default" class = 'return' bindtap='return_home'>返回首页</button></view>

enroll.wxss

/* pages/enroll/enroll.wxss */
page{background: #F0F0F0 ;}.row{margin-top: 20rpx;overflow: hidden;line-height: 100rpx;border-bottom: 1rpx solid #ccc;margin-left: 20rpx;margin-right: 20rpx;color: #777;background: #fff;}.info-input{height: 100rpx;margin-left: 50rpx;color: #777;float: left;}.info-input1{height: 100rpx;margin-left: 50rpx;color: #777;float: left;width: 420rpx;}.button{width: 200rpx;height: 70rpx;line-height: 70rpx;font-size: 28rpx;background: #33FF99;float: left;margin-left: 10rpx;margin-top: 15rpx;color: #FFFFFF;}.submit{margin-top: 50rpx;margin-left: 20rpx;margin-right: 20rpx;background: #FFC0CB;color: #FFFFFF;}.success{background: #ffffff;}.cheer{text-align: center;line-height: 400rpx;font-size: 60rpx;position: relative;}.return{margin: 20rpx;}

enroll.js

// pages/enroll/enroll.js
Page({/*** 页面的初始数据*/data: {text: '获取验证码', //按钮文字currentTime: 61, //倒计时disabled: false, //按钮是否禁用phone: '', //获取到的手机栏中的值VerificationCode: '',Code: '',NewChanges: '',NewChangesAgain: '',success: false,state: ''},/*** 获取验证码*/return_home: function (e) {wx.navigateTo({url: '/pages/login/login',})},handleInputPhone: function (e) {this.setData({phone: e.detail.value})},handleVerificationCode: function (e) {console.log(e);this.setData({Code: e.detail.value})},handleNewChanges: function (e) {console.log(e);this.setData({NewChanges: e.detail.value})},handleNewChangesAgain: function (e) {console.log(e);this.setData({NewChangesAgain: e.detail.value})},doGetCode: function () {var that = this;that.setData({disabled: true, //只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）color: '#ccc',})var phone = that.data.phone;var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空var phone = that.data.phone;var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空wx.request({url: '', //后端判断是否已被注册， 已被注册返回1 ，未被注册返回0method: "GET",header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {that.setData({state: res.data})if (phone == '') {warn = "号码不能为空";} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {warn = "手机号格式不正确";} //手机号已被注册提示信息else if (that.data.state == 1) {  //判断是否被注册warn = "手机号已被注册";}else {wx.request({url: '', //填写发送验证码接口method: "POST",data: {coachid: that.data.phone},header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {console.log(res.data)that.setData({VerificationCode: res.data.verifycode})//当手机号正确的时候提示用户短信验证码已经发送wx.showToast({title: '短信验证码已发送',icon: 'none',duration: 2000});//设置一分钟的倒计时var interval = setInterval(function () {currentTime--; //每执行一次让倒计时秒数减一that.setData({text: currentTime + 's', //按钮文字变成倒计时对应秒数})//如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字if (currentTime <= 0) {clearInterval(interval)that.setData({text: '重新发送',currentTime: 61,disabled: false,color: '#33FF99'})}}, 100);}})};//判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况if (warn != null) {wx.showModal({title: '提示',content: warn})that.setData({disabled: false,color: '#33FF99'})return;}}})},submit: function (e) {var that = thisif (this.data.Code == '') {wx.showToast({title: '请输入验证码',image: '../images/bar/error.png',duration: 2000})return} else if (this.data.Code != this.data.VerificationCode) {wx.showToast({title: '验证码错误',image: '../images/bar/error.png',duration: 2000})return}else if (this.data.NewChanges == '') {wx.showToast({title: '请输入密码',image: '../images/bar/error.png',duration: 2000})return} else if (this.data.NewChangesAgain != this.data.NewChanges) {wx.showToast({title: '两次密码不一致',image: '../images/bar/error.png',duration: 2000})return} else {var that = thisvar phone = that.data.phone;wx.request({url: getApp().globalData.baseUrl + '/Coachs/insert' ,method: "POST",data: {coachid: phone,coachpassword: that.data.NewChanges},header: {"content-type": "application/x-www-form-urlencoded"},success: function (res) {wx.showToast({title: '提交成功~',icon: 'loading',duration: 2000})console.log(res)that.setData({success: true})}})}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

效果图

微信小程序（七）注册相关推荐

微信小程序登录注册——云开发
微信小程序登录注册页面_云开发_调用云数据库源代码下载https://download.csdn.net/download/lujiebin/11241027 1.界面展示 2.代码 1.云开发初始 ...
微信小程序手机号注册获取验证码+验证判断
微信小程序手机号注册获取验证码+验证判断扫描二维码,进入首页,找到"小程序演示",效果类->手机号码注册效果,点击进入即可.
新手入门微信小程序-从注册到开发（校庆头像框）
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
微信小程序-登陆注册滑块验证
微信小程序-登陆注册滑块验证一.创建自定义组件MoveVerify 二.在index页面使用一.创建自定义组件MoveVerify MoveVerify.js Component({/*** 组件 ...
微信小程序的注册、开发和创建工具、配置、逻辑层及场景值
目录一.微信开发简介 1.微信开发概述 2.微信开放平台 3.微信公众平台 3.1微信公众平台概述 3.2账号分类 4.开放平台和公众平台的区别二.认识小程序 1.小程序概述 2.亮点与不足三. ...
微信小程序登录注册demo+java服务器(二)
四.eclipse 1.关键代码及注解 LoginServlet package yan.servlet;import java.io.File; import java.io.FileOutputS ...
微信小程序登录注册demo+java服务器(一)
一.开发平台和前期准备 1.前端工具:微信web开发者工具打web开发者工具,新建小程序项目,目录和名称自己随意填,AppID点击体验:小程序小程序打开后,点击右上方的详情,项目设置,勾选不校验x ...
微信小程序PHP注册,微信小程序教程之注册页面
微信小程序――Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性类型描述 data Objec ...
创建一个微信小程序——如何注册账号，安装微信开发者工具，创建一个小程序（详细步骤版）
一.注册账号注册地址注册地址:微信公众平台注册右上角--[立即注册]. 选择[小程序]. 按照步骤完成注册. 按照步骤激活邮箱后,在信息登记这里选择个人. 填写相关信息. 完成注册. 这一步可 ...
微信小程序-从注册到上架
来到今天,微信小程序依然发布了一周了,说来也后知后觉,这个时候才来做这个分享总结,看来真的是老了吧,不过无所谓,昨天做的小程序才刚刚上架,今天来给大家总结分享下!(做的一个房贷计算器,扫码即可使用,或 ...

微信小程序（七）注册

微信小程序（七）注册相关推荐

最新文章

热门文章