使用element-ui写密码验证

   <el-form
          ref="pNextFormRef"
          :model="pNextForm"
          :rules="pNextFormRules"
          class="form"
        >
          <el-form-item prop="password">
            <el-input
              v-model="pNextForm.password"
              placeholder="请输入密码"
              type="password"
            ></el-input>
            <img
              class="login-icon"
              src="../../assets/images/password.png"
              alt=""
            />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="pNextForm.confirmPassword"
              placeholder="请再次输入密码"
              type="password"
            ></el-input>
            <img
              class="login-icon"
              src="../../assets/images/password.png"
              alt=""
            />
          </el-form-item>
          <el-button class="button" @click="pSubmit()">确定</el-button>
        </el-form>

<script>
export default {
  data() {
    // 密码校验
    var PasswordValid = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.pNextForm.confirmPassword !== "") {
          this.$refs.pNextFormRef.validateField("confirmPassword");
        }
        callback();
      }
    };
    // 再次输入密码
    var comfirmPasswordVaild = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pNextForm.password) {
        console.log(value);
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //   手机号忘记密码输入密码
      pNextFormRules: {
        password: [{ validator: PasswordValid, trigger: "blur" }],
        confirmPassword: [{ validator: comfirmPasswordVaild, trigger: "blur" }],
      },

      // 手机号确定修改密码
      pNextForm: {
        password: "",
        confirmPassword: "",
      },
      // 状态  手机号修改 0  邮箱修改 1
      status: 0,
    };
  },
    methods: {
    // 手机号修改密码 确定
    pSubmit() {
      this.$refs["pNextFormRef"].validate((valid) => {
        if (valid) {
          if (this.status == 0) {
            // 手机号修改
          } else {
            // 邮箱修改
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

// 公共部分
.form {
  .login-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 14px;
    left: 16px;
  }
  /deep/.el-form-item {
    margin-bottom: 30px;
    .el-form-item__content {
      position: relative;
      .el-input__inner {
        padding-left: 40px;
        height: 44px !important;
        line-height: 44px;
      }
    }
  }
  /deep/.login-item.el-form-item {
    margin-bottom: 20px;
  }
  .button {
    width: 100%;
    height: 44px;
    background: #20aee5;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-family: MicrosoftYaHei;
  }
}