微信小程序,密码重置

1.首先在个人信息界面显示密码重置选项,然后创建目录password,在wxml设计页面,代码如下:
<!--pages/password/password.wxml-->
<view class='h2'>修改密码</view>
<view class='content'>
  <form bindsubmit="formSubmit">
    <view class='content_one'>
      <view class='pass'>
        <text>原密码</text>
        <input password='true'name="oldpwd" placeholder='请输入旧密码' />
      </view>
      <view class='pass'>
        <text>新密码</text>
        <input password='true' name="newpwd" placeholder='请输入新密码' />
      </view>
      <view class='pass'>
        <text>确认密码</text>
        <input password='true' name="newpwd2" placeholder='请确认一遍密码' />
      </view>
    </view>
    <button type='primary' form-type="submit" class='btn'>提交</button>
  </form>
</view>

2.在wxss中设计样式,代码如下:

/* pages/password/password.wxss */
.h2{
  width: 100%;
  height: 70rpx;
  background: #acc;
  color: #fff;
  line-height: 60rpx;
  text-align: center;
  border-radius: 20rpx;
}
page{
    background: #ddd;  
}
 .content{
  height:500px;
  width: 300px;
  margin:0px auto;
  display: flex;
  flex-direction: column;
} 
.content_one{
  width: 500px;
  height: 280px;
  /* background: red; */
}
input{
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.pass{
  width: 300px;
  height: 80px;
  margin-top: 30rpx;
  background: #acc;
  border-radius: 20rpx;
}
 .btn{
  width: 300px; 
}  

3.设计js密码不能为空,输入判断输入旧密码是否正确,确认两次新密码是否一致。代码如下:

// pages/password/password.js
//获取应用实例
const app = getApp();


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;

    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 = "https://www.lishuming.top/pj/index.php/student/api/setpassword";
      wx.showLoading({
        title: '网络请求中......',
      })
      wx.request({
        url: app.globalData.url.setpassword,
        method: 'POST',
        data: {
          no: '1635050307',
          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.navigateTo({
                    url: '../login/login',
                  })
                }, 2000)
              } 
            })
          }
        }
      })
    }
  },

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

        },

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

        },

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

        },

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

        },

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

        },

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

        },

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

        },

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

        }
})
密码重置功能全部完成。
  • 4
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值