微信小程序之找回密码

第一步：根据学号和绑定的邮箱来进行密码的找回

第二步：输入想要设定的新密码，并输入邮箱收到的验证码

wxml代码如下：

<!--pages/forgotpwd/forgotpwd.wxml-->
<!-- <text>pages/forgotpwd/forgotpwd.wxml</text> -->
<view class='content'><form bindsubmit='submit_email' wx:if="{{form_index ==0}}"><label>找回密码：第一步</label><view class="sections"><input name="no" type='number' placeholder-class='small'  placeholder='请输入学号' /></view><view class="sections"><input name="email" placeholder-class='small' placeholder='请输入绑定的邮箱' /></view><button type='primary' placeholder-class='small' formType="submit" >下一步</button></form><form bindsubmit='submit_password' wx:else><label>找回密码：第二步</label><view class="section"><view class="left"><input name="pwd" password="{{mask}}" placeholder-class='small' placeholder='输入新密码' /></view><view class="right"><switch   bindchange="switchChange"/></view></view><view class="section"><view class="left"><input name="validcode" type='number'  placeholder-class='small' placeholder='输入邮件中的验证码'/></view><view class="right"><text style="color:#aaa">剩余：{{second}}秒</text></view></view><button type='primary' placeholder-class='small' formType="submit" disabled="{{disabled}}">提交</button></form>
</view>

调用的js代码

const app=getApp();
//倒计时
function countdown(that) {var second = that.data.secondif (second == 0) {that.setData({disabled: true});return;}var time = setTimeout(function () {that.setData({second: second - 1});countdown(that);}, 1000)
}Page({/*** 页面的初始数据*/data: {no:null,form_index:0,second: 30,disabled: false,mask: true},switchChange: function (e) {// console.log(e.detail.value)this.setData({ mask: !e.detail.value })},submit_email:function(e){// console.log(e);var no=e.detail.value.no;var email=e.detail.value.email;if(email==null||email==''){wx.showToast({title: '请输入邮箱',icon: 'none',duration: 2000})return;}wx.showLoading({title: '加载中...',})wx.request({url: app.globalData.url.forgotpwd,method: 'POST',data: {no: no,email: email},header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {wx.hideLoading();console.log(res.data);if(res.data.error){wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})}else{this.setData({ no: no, second: res.data.expire });countdown(this);wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})setTimeout(() => {this.setData({ form_index: 1 });}, 2000)}}})},
//重设密码submit_password:function(e){// console.log(e);var pwd=e.detail.value.pwd;var validcode = e.detail.value.validcode;if (validcode == '' || validcode == null || pwd == '' || pwd == null) {wx.showToast({title: '验证码和密码不能为空',icon: 'none',duration: 2000})} else {wx.request({url: app.globalData.url.initpassword,method: 'POST',data: {no: this.data.no,pwd: pwd,validcode: validcode},header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {// wx.hideLoading();console.log(res.data);if (res.data.error) {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})} else {wx.showToast({title: res.data.msg,icon: 'success',duration: 2000})setTimeout(() => {wx.navigateBack({delta: 1})}, 2000)}}})}
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序之找回密码相关推荐

微信小程序--（找回密码）
html:  <view class="container"><form b ...
微信小程序账号或者密码忘记如何找回？
微信小程序账号或者密码忘记如何找回? 1.到登录界面,点击"找回账号或密码". 2.找回账号. 3.点击"同意". 4.账号类型,选择小程序,输入小程序名称或者 ...
mac微信小程序源代码找回
文章目录 1. 电脑中安装安卓模拟器 - 可选模拟器 - 下载安装包 - 电脑中解压 2. 模拟器中安装所需软件 - 安装微信app - 安装 RE 文件管理器 3. 设置root权限 - 夜神模拟器 ...
微信小程序之支付密码输入demo
微信小程序之支付密码输入demo 原文链接:https://www.cnblogs.com/tandaxia/p/9338443.html 在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要 ...
如何给自制的微信小程序设置一个密码
给自制的微信小程序设置密码,需要wxml文件和js文件.本文将wxml文件命名为fenliu.wxml,将js文件命名为fenliu.js. fenliu.wxml文件内容为: <view> ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
微信小程序之支付密码输入
wxml: <view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入 ...
微信小程序设置解锁密码
因为按照产品的要求,不要图案.所以就没做了.就是按键的,后期有时间把图案也做出来 <view class="wx_unlocking"><view class=' ...
微信小程序--6位密码输入自动提交
效果如图所示,自动获取焦点,只允许输入数字,6位校验,6位数字自动提交数据,数据提交成功后隐藏输入框,除了点击"忘记密码",其余的均隐藏交易密码弹窗, 公共插件代码如下所示gGit ...

微信小程序之找回密码

微信小程序之找回密码相关推荐

最新文章

热门文章