在日常生活中，很容易忘记密码，所以这个时候找回密码就很重要了！！！（此例子是在一个评教app里面）
1.首先在这个app里面得有绑定一个邮箱（这个邮箱对于找回密码发挥着至关重要的作用）
绑定一个邮箱显示页面
点进去可以进行修改邮箱
页面的代码是
<view class='pj'>
<form bindsubmit='formSubmit' bindreset='formReset'>
<view class='cont'>
<view class='pwd'>
<text class='text1'>登录密码</text>
<input password='true' name='pwd' placeholder='请输入登录密码' class='pwd1' />
</view>
<view class='pwd'>
<text class='text1'>邮箱</text>
<input password='true' name='email' placeholder='请输入邮箱' class='pwd1'/>
</view>
</view>
<view class='section'>
<button type='primary' form-type='submit' class='submit'>提交</button>
</view>
</form>
</view>
为这个提交绑定单击事件
// pages/email/email.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
formSubmit: function (e) {
var pwd = e.detail.value.pwd;
var email = e.detail.value.email;
var student = wx.getStorageSync('student');
var no = student.no;
if (pwd == '' || email == '') {
wx.showToast({
title: '密码或邮箱不能为空',
icon: 'none',
duration: 1000
})
} else {
wx.request({
url: app.globalData.url.email,
data: {
no: no,
pwd: pwd,
email: email
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// console.log(res.data);
if (res.data.error) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
})
} else {
var _student = wx.getStorageSync('student');
_student.email = email;
wx.setStorageSync('student', _student);
wx.showToast({
title: '邮箱绑定成功',
icon: 'success',
duration: 2000,
success: () => {
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 2000)
}
})
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
绑定邮箱成功
2.设计忘记密码页面
点击这个忘记密码->出现
<view class="pj">
<view class='a'>
<form bindsubmit='send_email' wx:if="{{form_index == 0}}" >
<text>找回密码：第1步</text>
<view class="section">
<input name="no" type='number' placeholder-class='small' placeholder='请输入学号' />
</view>
<view class="section">
<input name="email" placeholder-class='small' placeholder='请输入绑定的邮箱' />
</view>
<button type='primary' class='submit' placeholder-class='small' formType="submit" >下一步</button>
</form>
<form bindsubmit='submit_password' wx:else>
<text>找回密码：第2步</text>
<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' formType="submit" disabled="{{disabled}}" >提交</button>
</form>
</view>
</view>
绑定事件
// pages/forgotpwd/forgotpwd.js
const app = getApp();
function countdown(that) {
var second = that.data.second
if (second == 0) {
that.setData({
disabled: true
});
return;
}
var time = setTimeout(function () {
that.setData({
second: second - 1
});
countdown(that);
}
, 1000)
}
Page({
/**
* 页面的初始数据
*/
data: {
form_index: 0,
no: null,
second: 30,
disabled: false,
mask: true
},
switchChange: function (e) {
// console.log(e.detail.value)
this.setData({ mask: !e.detail.value })
},
//提交邮箱
send_email: function (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,
data: {
no: no,
email: email
},
method: "POST",
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 validcode = e.detail.value.validcode;
var pwd = e.detail.value.pwd;
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,
validcode: validcode,
pwd: pwd
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// 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 () {
}
})更改密码成功