微信小程序之密码重置

密码重置需要输入原密码以及对新密码进行校验

首先就是搭建一个页面

<!--pages/password/password.wxml-->
<!-- <text>pages/password/password.wxml</text> -->
<form bindsubmit='formSubmit'>
<view class='old'>
  <text>原密码</text>
  <input password='true' name='oldpwd' placeholder='请输入原密码' />
</view>
<view class='new'>
  <text>新密码</text>
  <input password='true' name='newpwd' placeholder='请输入新密码' />
</view>
<view class='ok'>
  <text>确认新密码</text>
  <input password='true' name='newpwd2' placeholder='请确认一遍新密码' />
</view>
<button type='primary' form-type='submit'>提交</button>
</form>

对页面进行样式设定

/* pages/password/password.wxss */
.old{
  height: 150rpx;
  background-color: #fff;
  margin: 20rpx;
}
.new{
  height: 150rpx;
  background-color: #fff;
  margin: 20rpx;
}
.ok{
  height: 150rpx;
  background-color: #fff;
  margin: 20rpx;
}
text{
  /* margin-top: 50rpx; */
  margin-left: 20rpx;
}
input{
  margin-top: 30rpx;
  margin-left: 20rpx;
  border-bottom: 1px solid #777;
}
button{
  margin: 20rpx;
}

接下来就是js,对提交的数据进行验证

const app=getApp();
// pages/password/password.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },
  formSubmit:function(e){
    // console.log(e);
    var oldpwd=e.detail.value.oldpwd;
    var newpwd = e.detail.value.newpwd;
    var newpwd2 = e.detail.value.newpwd2;
    var no = wx.getStorageSync('student').no;
    // console.log(no);
    if(oldpwd=='' || newpwd=='' || newpwd2==''){
      wx.showToast({
        title: '密码不能为空',
        icon:'none',
        duration:1000
      })
    }else if(newpwd!=newpwd2){
      wx.showToast({
        title: '两次输入不一致',
        icon: 'none',
        duration: 1000
      })
    }else{
      var url = app.globalData.url.setpassword;
      wx.request({
        url: url, //仅为示例，并非真实的接口地址
        method:'POST',
        data: {
          no: no,
          oldpwd:oldpwd,
          newpwd:newpwd
        },
        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,
              success: function () {
                setTimeout(function () {
                  wx.navigateBack({ belta: 1 })
                }, 2000)
              }
            })
          }
         
        }
      })
    }

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})