最近实现了一个修改密码的弹出框：

技术和实现效果

是基于vue2+elementUI的修改密码弹出框，主要由旧密码，新密码，确认密码这三个字段组成。主要实现了表单效验和新密码和确认密码的效验

效果图如下：

代码如下：

DOM结构：

<el-dialog title="修改密码" :visible.sync="dialogVisible" width="50%">
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="旧密码" prop="oldPwd" type="password">
      <el-input v-model="form.oldPwd" clearable></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newPwd">
      <el-input v-model="form.newPwd" type="password" clearable></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="surePwd">
    <--! **`@input` 是一个事件监听器，用于监听 `<el-input>` 组件的输入事件。当用户进行输入时会触发checkPasswordsMatch方法，进行新密码和确认密码的校验**-->
      <el-input
        v-model="form.surePwd"
        @input="checkPasswordsMatch"
        type="password"
        clearable
      ></el-input>
    </el-form-item>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitPwd">确 定</el-button>
  </el-form>
</el-dialog>

js代码：

import { updateUserPwd } from "xxxxxxx";
export default {
  name: "HeadTip",
  data() {
    return {
      form: {
        oldPwd: "",
        newPwd: "",
        surePwd: "",
      },
      // 表单效验规则
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        surePwd: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
           //调用validateSurePwd方法，将新密码和确认密码进行效验
          { validator: this.validateSurePwd, trigger: "blur" },
        ],
      },
    };
  },

  methods: {
  // 修改个人密码
    editPWD() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs["form"] !== undefined) {
          this.$refs["form"].resetFields();
        }
      });
    },
    //确认密码和新密码的动态效验
    validateSurePwd(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.newPwd) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    checkPasswordsMatch() {
      this.$refs.form.validateField("surePwd");
    },
    //点击确定按钮提交
    submitPwd() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 表单验证通过，可以进行提交操作
          await updateUserPwd(this.form.newPwd, this.form.surePwd).then(() => {
            console.log("密码修改成功");
            this.$refs["form"].resetFields();  // ===> 密码修改成功之后，就清除表单的缓存
          });
          this.dialogVisible = false;
          this.$refs["form"].resetFields();
        }
      });
    },
  },  
  }