拿来即用修改密码功能

<template><div><!-- 重置密码 --><el-dialogtitle="修改密码"v-model="state.resetPwdDialogVisible":showClose="state.firstLogin !== 1"width="550px"@close="onCancel":close-on-click-modal="false"><el-form :model="state.resetPwdForm" status-icon :rules="state.resetPwdRules" ref="pwdForm" label-width="100px"><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-form-item label="新密码" prop="pwd_new1"><el-inputplaceholder="请输入新密码"type="password"v-model="state.resetPwdForm.pwd_new1"autocomplete="new-password"show-passwordclearable></el-input></el-form-item></el-col><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-form-item label="确认新密码" prop="pwd_new2"><el-inputplaceholder="请再次输入新密码"type="password"v-model="state.resetPwdForm.pwd_new2"autocomplete="new-password"show-passwordclearable></el-input></el-form-item></el-col></el-form><template #footer><span class="dialog-footer"><el-button @click="onCancel" size="default">取消</el-button><el-button v-throttle type="primary" @click="onSubmit" size="default">确定</el-button></span></template></el-dialog></div>
</template><script setup name="layoutBreadcrumbUser">
import { updatePwd } from '/@/api/login.js';const pwdForm = ref(null);const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (state.resetPwdForm.pwd_new2 !== '') {pwdForm.value.validateField('pwd_new2');}callback();}
};
const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== state.resetPwdForm.pwd_new1) {callback(new Error('两次输入密码不一致!'));} else {callback();}
};
const state = reactive({resetPwdDialogVisible: false, // 修改密码resetPwdForm: {pwd_new1: '',pwd_new2: '',},resetPwdRules: {pwd_new1: [{required: true,trigger: 'blur',message: '请输入6~20位不含有中文的密码',pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,},{ validator: validatePass, trigger: 'blur' },],pwd_new2: [{required: true,trigger: 'blur',message: '请输入6~20位不含有中文的密码',pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,},{ validator: validatePass2, trigger: 'blur' },],}
});// 取消
const onCancel = () => {state.resetPwdDialogVisible = false;// 清除验证pwdForm.value.resetFields();
};// 修改密码保存
const onSubmit = () => {if (!pwdForm) return;pwdForm.value.validate((valid) => {if (valid) {toSavePwd();} else {return false;}});
};const toSavePwd = () => {updatePwd(state.resetPwdForm).then((res) => {if (res.data.code === 1) {ElMessage.success('密码修改成功');state.resetPwdDialogVisible = false;}}).catch((error) => {return;});
};// 页面加载时
onMounted(() => {});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60219.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp结合Canvas+renderjs根据经纬度绘制轨迹(二)

uniapp结合Canvasrenderjs根据经纬度绘制轨迹 文章目录 uniapp结合Canvasrenderjs根据经纬度绘制轨迹效果图templaterenderjsjs数据结构 ​ 根据官方建议要想在 app-vue 流畅使用 Canvas 动画&#xff0c;需要使用 renderjs 技术&#xff0c;把操作canvas的js逻辑放到视图层运…

Python爬虫框架之Selenium库入门:用Python实现网页自动化测试详解

概要 是否还在为网页测试而烦恼&#xff1f;是否还在为重复的点击、等待而劳累&#xff1f;试试强大的Selenium&#xff01;让你的网页自动化测试变得轻松有趣&#xff01; 一、Selenium库到底是什么&#xff1f; Selenium 是一个强大的自动化测试工具&#xff0c;它可以让你直…

华为 连接OSPF和RIP网络---OSPF和RIP网络相互引入

路由引入简介 不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路由的引入来实现。 获得路由信息一般有3种途径&#xff1a;直连网段、静态配置和路由协议。可以将通过这3种途径获得的路由信息引入到路由协议中&#xff0c;例如&#xff0c;把直连网段引入…

Matlab图像处理-图像缩放

基本概念 图像缩放是指将给定的图像在x轴方向按比例缩放a倍&#xff0c;在y轴方向按比例缩放b倍&#xff0c;从而获得一幅新的图像。 如果ab&#xff0c;即在x轴方向和y轴方向缩放的比率相同&#xff0c;则称这样的比例缩放为图像的全比例缩放。 如果a≠b&#xff0c;图像比…

Nacos安装

一、下载Nacos1.4.1二、单机版本安装 2.1 将下载的nacos安装包传输到服务器2.2 解压文件2.3 进入bin目录下 单机版本启动2.4 关闭nacos2.5 访问Nacos地址 IP&#xff1a;8848/nacos三、集群版本的安装 3.1 复制nacos安装包&#xff0c;修改为nacos8849&#xff0c;nacos8850&am…

C# | DBSCAN聚类算法实现 —— 对直角坐标系中临近点的点进行聚类

C# | DBSCAN聚类算法实现 聚类算法是一种常见的数据分析技术&#xff0c;用于将相似的数据对象归类到同一组或簇中。其中&#xff0c;DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;是一种基于密度的聚类算法&#xff0c;能够有效…

Spark有两种常见的提交方式:client 模式和 cluster 模式对机器 CPU 的影响

Spark有两种常见的提交方式&#xff1a;client 模式和 cluster 模式。这两种方式对机器 CPU 的影响略有不同 &#xff0c;请参考以下说明 Client 模式&#xff1a; 在 Client 模式下&#xff0c;Spark Driver 运行在提交任务的客户端节点上&#xff08;即运行 spark-submit 命…

云服务器利用Docker搭建sqli-labs靶场环境

一、安装宝塔面板 使用xshell、electerm、SecureCRT等远程终端连接登陆上云服务器&#xff0c;在Linux宝塔面板使用脚本安装 安装后&#xff0c;如下图&#xff1a;按照提示&#xff0c;在云服务器防火墙/安全组放行Linux宝塔面板的端口 在浏览器打开上述网址&#xff0c;登…

【SpringSecurity】七、SpringSecurity集成thymeleaf

文章目录 1、thymeleaf2、依赖部分3、定义Controller4、创建静态页面5、WebSecurityConfigurerAdapter6、权限相关7、当用户没有某权限时&#xff0c;页面不展示该按钮 1、thymeleaf 查了下读音&#xff0c;leaf/li:f/&#xff0c;叶子&#xff0c;前面的单词发音和时间time一…

【算法训练-数组 三】数组中的第K个最大元素(TOPK问题|寻找第K大)

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【寻找第K大】&#xff0c;使用【数组】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…

九、适配器模式

一、什么是适配器模式 适配器模式&#xff08;Adapter&#xff09;的定义如下&#xff1a;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式&#xff08;Adapter&#xff09;包含以下主要角色&…

WebGPT VS WebGPU

推荐&#xff1a;使用 NSDT编辑器 快速搭建3D应用场景 随着WebGPU的引入&#xff0c;Web开发发生了有趣的转变&#xff0c;WebGPU是一种新的API&#xff0c;允许Web应用程序直接访问设备的图形处理单元&#xff08;GPU&#xff09;。这种发展意义重大&#xff0c;因为 GPU 擅长…

【MySQL】用户管理

之前我们一直都使用root身份来对mysql进行操作&#xff0c;但这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理 目录 一、用户 1.1 用户信息 1.2 添加用户 1.3 删除用户 1.4 修改用户密码 二、用户权限 2.1 赋予授权 2.2 回收权限 一、用户 1.1 用户信息…

【Axure高保真原型】中继器网格图片拖动摆放

今天和大家分享中继器网格图片拖动摆放的原型模板&#xff0c;我们可以通过鼠标拖动来移动图片&#xff0c;拖动过程其他图标会根据图片拖动自动排列&#xff0c;松开鼠标是图片停放在指定位置&#xff0c;其他图标自动排列。那这个模板是用中继器制作的&#xff0c;所以使用也…

[机器学习]分类算法系列①:初识概念

目录 1、概念 2、数据集介绍与划分 2.1、数据集的划分 2.2、sklearn数据集介绍 2.2.1、API 2.2.2、分类和回归数据集 分类数据集 回归数据集 返回类型 3、sklearn转换器和估计器 3.1、转换器 三种方法的区别 3.2、估计器 3.2.1、简介 3.2.2、API 3.3、工作流程 …

【软考】系统集成项目管理工程师(一)信息化基础知识【6分】

一、信息与信息系统 1、信息技术 为解决信息的采集、加工、存储、传输、处理、计算、转换、表现等问题而不断繁荣发展 核心-传输技术&#xff08;通常指通信、网络等&#xff09; 2、信息的质量属性 特点&#xff1a;客观性、普遍性 属性描述精确性对事物状态描述的精准程度…

图书馆项目Java阅览室管理系统jsp源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 图书馆项目 系统有1权限&#xff1a;管理员 用所技术…

Centos7 安装 docker

1、前提条件 目前&#xff0c;CentOS 仅发行版本中的内核支持 Docker。Docker 运行在CentOS7 (64)上&#xff0c; 要求系统为64位、Linux系统内核版本为 3.8以上 查看自己系统的内核 cat /etc/redhat-release 或 uname -r 2、卸载旧版本 旧版本的 Docker 的名称为docker或doc…

【注册岩土】Python土力学与基础工程计算.PDF-摩尔-库伦强度理论

8.3 Python求解 Python求解代码如下&#xff1a; 1.import math 2. 3.sigma1 300 # 最大主应力&#xff0c;单位 kPa 4.sigma3 100 # 最小主应力&#xff0c;单位 kPa 5.alpha 30 # m-n面与最小主应力方向夹角&#xff0c;单位度 6. 7.rad_alph…

Matlab图像处理-图像旋转

基本概念 图像的旋转变换属于图像的位置变换&#xff0c;通常是以图像的中心为原点&#xff0c;将图像上的所有像素都旋转一个相同的角度。旋转后&#xff0c;图像的大小一般会改变。图像的旋转变换是指以图像的中心为原点&#xff0c;将图像上的所有像素都旋转同一个角度的变…