vue后台管理修改密码

这篇具有很好参考价值的文章主要介绍了vue后台管理修改密码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item :label="$t('user.oldpassword')" prop="oldPassword">
      <el-input v-model="user.oldPassword" :placeholder="this.$t('user.oldPassword')" type="password" show-password/>
    </el-form-item>
    <el-form-item :label="$t('user.newpassword')" prop="newPassword">
      <el-input v-model="user.newPassword" :placeholder="this.$t('user.newPassword')" type="password" show-password/>
    </el-form-item>
    <el-form-item :label="$t('user.confirmpassword')" prop="confirmPassword">
      <el-input v-model="user.confirmPassword" :placeholder="this.$t('user.confirmPassword')" type="password" show-password/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">{{$t('user.save')}}</el-button>
      <el-button type="danger" size="mini" @click="close">{{$t('user.close')}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error(this.$t('user.Error')));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: this.$t('user.rules.oldPassword.message'), trigger: "blur" }
        ],
        newPassword: [
          { required: true, message:  this.$t('user.rules.newPassword.message1'), trigger: "blur" },
          { min: 6, max: 20, message: this.$t('user.rules.newPassword.message2'), trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: this.$t('user.rules.confirmPassword.message'), trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess(this.$i18n.t('user.msgSuccess'));
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

vue后台管理修改密码,vue.js,elementui,javascript

判断旧密码输入的是否正确是后端判断返回的,前端处理,输入的两次密码是否一直即可,使用自定义表单校验文章来源地址https://www.toymoban.com/news/detail-781357.html

到了这里,关于vue后台管理修改密码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js 3.0 企业级管理后台开发实战 基于Element Plus

    本书内容 本书共 13 章,各章简介如下。 第 1 章“项目启动” 介绍新项目启动时和项目有关的内容,如项目原型和项目 UI。读者从 中能够清楚地了解项目的业务逻辑、具体要开发的功能,以及要呈现给用户的界面效果和交互 效果。此外,本章还会讨论项目开发过程的原型评

    2023年04月08日
    浏览(44)
  • Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架!

    Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架! RdsAdmin是一款PHP语言开发的,基于Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 等开源框架精心打造的,前后端分离的,一键生成功能菜单的,快速

    2024年02月14日
    浏览(60)
  • axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台

    书接上回,上一篇文章介绍了一个基于 Vue3 和 ElementPlus 的联系人列表管理后台小 demo (Vue3 + ElementPlus实战学习——模拟简单的联系人列表管理后台),在有了上一篇文章的基础上,我们试着用 axios 来获取数据,而不是用写死的数据,然后用 Node.js + Vue3 + ElementPlus 来实现联系

    2024年02月10日
    浏览(60)
  • axios实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台

    书接上回,上一篇文章介绍了一个基于 Vue3 和 ElementPlus 的联系人列表管理后台小 demo (Vue3 + ElementPlus实战学习——模拟简单的联系人列表管理后台),在有了上一篇文章的基础上,我们试着用 axios 来获取数据,而不是用写死的数据,然后用 Node.js + Vue3 + ElementPlus 来实现联系

    2024年02月09日
    浏览(83)
  • 前端使用elementui开发后台管理系统的常用功能(持续更新)

    前言:本次的文章完全是自己开发中遇到的一些问题,经过不断的修改终于完成的一些功能,当个快捷的查看手册吧~ 功能描述:数据使用的若依的字典,或者是自定义数据,可以点击每个选项进行选择,取消选择,也可以在已选择进行清除和单个删除 使用: @selection-change

    2024年02月09日
    浏览(48)
  • 若依框架后台管理系统-忘记后台管理密码-忘记密码重置方法

    1. 无盐老版 1.1、生成密码密文 1.2、替换数据库中密码 2. 加盐新版 (今天 2022-03-16) 2.1、生成密码密文 2.2、替换数据库中密码 补充说明 参考资料 管理后台忘记密码两步解决: 找到工具类: com.ruoyi.common.utils.SecurityUtils 添加 main 方法:打印出密码密文 大家好,我是笨笨,笨

    2024年02月15日
    浏览(43)
  • axios 实战进阶练习( axios 封装篇)——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台的 axios 封装实战

    在之前的文章 axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 中,我们完成了这个 基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 的项目,其中项目的后端接口是用 Node.js 编写的,通过 axios 来获取接口,所以这篇文章我们来对这个 axi

    2024年02月11日
    浏览(104)
  • vue3项目使用样式穿透修改elementUI默认样式

    在css单文件中,我们在style标签中写组件的样式,可以看到,一般style标签都会带上一个scoped属性,这样可以实现及时不同组件选择器一样,但是样式互不干扰。 看一个例子,我们在两个组件中都定义一个 hello-world-box 类,在对应的scope标签中设置不同的样式。 可以看到,vu

    2023年04月09日
    浏览(42)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • vue elementui 修改步骤条el-steps的样式

    感觉以后可能还会用到,在此记录一下 场景: elementui原有的样式: 目标样式:   实现:   html代码: 多加了个居中属性:align-center css代码:  ok啦,如果有更优的方法,再优化    

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包