修改密码完整功能

最新推荐文章于 2024-05-24 23:45:01 发布

爱吃羊的狗

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量309

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/130125630

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

修改密码完整功能

结构

<el-dropdown @command="userAction">
          <span class="userInfo">{{ username }}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="修改密码">修改密码</el-dropdown-item>
            <el-dropdown-item command="退出">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogEdit"
      :append-to-body="true"
      width="30%"
    >
      <el-form :model="form" ref="form" :rules="rule">
        <el-form-item>
          <el-col :span="24">
            <el-form-item
              label="原始密码:"
              prop="originalpassword"
              label-width="110px"
            >
              <el-input
                v-model="form.originalpassword"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-form-item label="新密码:" prop="password" label-width="110px">
              <el-input
                maxlength="10"
                minlength="3"
                v-model="form.password"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-form-item
              label="确认新密码:"
              prop="checkPassword"
              label-width="110px"
            >
              <el-input
                maxlength="10"
                minlength="3"
                v-model="form.checkPassword"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-col :span="24">
            <el-button @click="resetForm('form')">取消</el-button>
            <el-button type="primary" @click="submitForm('form')"
              >提交</el-button
            >
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

js

export default{
  data(){
      var validatePass = (rule, value, callback) => {
      var pass = /^(?=.*?[a-z)(?=.*>[A-Z])(?=.*?[0-9])[a-zA_Z0-9]{8,10}$/gi;
      if (!pass.test(value)) {
        callback(new Error("请输入8-10位英文和数字组成的密码"));
      } else {
        if (this.form.checkPassword !== "") {
          this.$refs.form.validateField("checkPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return{
       form: {
        originalpassword: "", //原始密码
        password: "", //新密码
        checkPassword: "", //确认密码
      },
      rule: {
        originalpassword: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
          // { validator: validateoriginalPass, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    }

  },
  methods:{
     userAction(type) {
      if (type === "退出") {
        this.$router.push({ path: "/" });
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("user");
      } else if (type == "修改密码") {
        console.log("修改密码");
        this.dialogEdit = true;
        this.title = "修改密码";
        this.form = {
          originalpassword: "", //原始密码
          password: "",//新密码
          checkPassword: "",//确认密码
        };
      }
    },
   submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let userSecurityInputDTO = {
            account: this.$store.getters.account,
            newPassword: this.form.password,
            oldPassword: this.form.originalpassword,
          };
          const res = await changePasswordFn(userSecurityInputDTO);
          console.log(res, "res");
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogEdit = false;
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
    resetForm(formName) {
      this.dialogEdit = false;
      this.$refs[formName].resetFields();
    },
  }
}