vue.js修改密码表单

按钮：

<el-button plain @click="changePassword" size="small">修改密码</el-button>

弹出修改密码弹框：

<div>
  <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px" top="30vh">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="当前密码：" :label-width="formLabelWidth" prop="curPassw">
        <el-input type="password" placeholder="请输入当前密码" v-model="form.curPassw" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPassw">
        <el-input type="password" placeholder="请输入新密码" v-model="form.newPassw" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码：" :label-width="formLabelWidth" prop="conNewPassw">
        <el-input type="password" placeholder="请确认新密码" v-model="form.conNewPassw" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
    </div>
  </el-dialog>
</div>

data() {
    //此处即表单发送之前验证
    let validateNewPassword = (rule, value, callback) => {
      if (value === this.form.curPassw) {
        callback(new Error('新密码不能与原密码相同!'))
      } else {
        callback()
      }
    }
    let validateConPasd = (rule, value, callback) => {
      if (value !== this.form.newPassw) {
        callback(new Error('与新密码不一致!'))
      } else {
        callback()
      }
    }
    return {
        dialogFormVisible: false,
        rules: {
        curPassw: [
          { required: true, message: '请输入当前密码', trigger: 'blur' },
        ],
        newPassw: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validateNewPassword, trigger: 'blur' },
        ],
        conNewPassw: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validateConPasd, trigger: 'blur' },
        ],
      },
      form: {
        curPassw: '',
        newPassw: '',
        conNewPassw: '',
      },
      userId:'',
      formLabelWidth: '120px',
        }

 changePassword() {
      this.clearForm()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()//打开dialog的同时清空表单
      })
  },

//重置
    clearForm() {
      this.form = {
        curPassw: '',
        newPassw: '',
        conNewPassw: '',
      }
    },

 //提交新密码
    onSubmit(formName) {
    this.$confirm('此操作将修改密码, 是否继续?', '提示', {//在提交表单之前确认是否修改密码
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.saveNewPaswd()//提交新密码的同时需要调用接口，所以把这个方法写下面去了
            } else {
              return false
            }
          })
        })
    },

  //保存新密码
    saveNewPaswd() {
      let param = {//根据需要向后台传参数
        oldPassWord: this.form.curPassw,
        newPassWord: this.form.newPassw,
        userId: this.userId,
      }
      this.API.aaUserPassword(param)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            setTimeout(() => {
              this.$router.push({//修改成功之后跳转到登录界面
                path: '/login',
              })
            }, 1000)
          }
        })
        .catch((err) => {//后台确认如果填写的旧密码不对，就报错
          this.$message.error(err || '请填写正确的旧密码')
        })
    },