实现修改密码的功能(Vue+elementUI)

<!-- 修改密码界面 -->
    <el-dialog title="重置密码" width="30%" :visible.sync="cgpwdVisible" :close-on-click-modal="false"
      :modal-append-to-body='false' @close="handleCloseDialog">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" label-position="right">
        <el-form-item label="旧密码:" prop="oldpassword">
          <el-input v-model="dataForm.oldpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword" label-width="100px">
          <el-input v-model="dataForm.newpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkpassword" label-width="100px">
          <el-input v-model="dataForm.checkpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 5px;">
        <el-button type="primary" @click.native="handleUpdataPw">确认</el-button>
        <el-button @click.native="cgpwdVisible = false" type="danger">取消</el-button>
      </div>
    </el-dialog>
    
    //属性和方法
    data() {
        //定义的旧密码验证是否成功和新密码输入的是否一致
        var checkOldPw = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入旧密码'));
            }
            this.checkIsRepeat(value, function () { //checkIsRepeat用来调用接口验证用户输入的旧密码是否为数据库存储的密码一致,一致你才可以修改密码
              callback();
            }, function (err) {
              callback(new Error(err.message));
            })
          };
          var checkNewPw = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请再次输入密码'));
            }
            if (this.dataForm.newpassword !== value) {
              callback(new Error("密码不一致"));
            } else {
              callback()
            }
          };
        return {
            cgpwdVisible: false,
            dataForm: {
              oldpassword: '',
              newpassword: '',
              checkpassword: ''
            },
            dataFormRules: {
              oldpassword: [{
                required: true,
                validator: checkOldPw,
                trigger: 'blur'
              }],
              newpassword: [{
                required: true,
                message: '请输入新密码',
                trigger: 'blur'
              }],
              checkpassword: [{
                required: true,
                validator: checkNewPw,
                trigger: 'blur'
              }]
            },        
        },
        method() {
            //关闭时候清空表单
            handleCloseDialog() {
            this.$refs.dataForm.resetFields();
          },
          // 校验旧密码
          checkIsRepeat(oldpw, success, error) {
            var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
            if (!oldpw) return;
            var params = {
              oldpassword: oldpw,
              userId: userId
            }
            ajaxNewGet(getNativePath2() + "user/checkSysUserPwd", params, function (res) {   //设置dataType: 'json',希望服务器返回的数据类型
              if (res.code == 200) {
                success()
              } else {
                error(res)
              }
            }, function (err) {
              console.log("err", err)
            })
          },
          //修改密码,调用接口更改
          handleUpdataPw() {
            var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
            var formData = new FormData();
            formData.append("suId", userId);
            formData.append("suPwd", this.dataForm.newpassword);
            var that = this;
            this.$refs.dataForm.validate((valid) => {
              if (!valid) return;
              ajaxPostForm(getNativePath2() + "user/updSuPwd", formData, res => {  //以formData格式传给后端,其他属性可以关掉,设置这俩个很重要:processData: false, contentType: false,
                if (res.code == '200') {
                  this.$message.success(res.message)
                  this.cgpwdVisible = false;
                  this.$refs.dataForm.resetFields();
                  setTimeout(function () {
                    that.quitHander()
                  }, 1000)
                } else {
                  this.$message.error(res.message)
                }
              }, err => {
                console.log("err", err)
              })
            })
          },          
        }
    }

你可能感兴趣的:(前端,elementui,vue.js,javascript)