当前位置: 首页 > news >正文

修改密码和再次确认密码的js和element-ui的使用

请添加图片描述

<template><div><!-- plan的插槽 --><plan title="修改密码"><!-- 插槽的名字 --><span slot="header">修改密码</span><el-form:model="ruleForm2"status-icon:rules="rules2"ref="ruleForm2"label-width="100px"class="demo-ruleForm"><el-form-item label="原密码" prop="oldPwd"><el-input v-model="ruleForm2.oldPwd"></el-input></el-form-item><el-form-item label="新密码" prop="newPwd"><el-input v-model="ruleForm2.newPwd"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input v-model="ruleForm2.checkPass"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm()">提交</el-button><el-button @click="resetForm('ruleForm2')">重置</el-button></el-form-item></el-form></plan></div>
</template><script>
import { checkoldpwd, editpwd } from "@/api/account.api";
export default {data() {// 检查旧密码是否正确let validatePass = (rule, value, callback) => {checkoldpwd(value).then(res => {console.log(res);if (res.data.code === 200) {callback();} else {callback(new Error("密码不正确"));}});};// 检查新密码let validateNewpwd = (rule, value, callback) => {if (this.ruleForm2.checkPass) {this.$refs.ruleForm2.validateField("checkPass");}callback();};// 检查两次密码是否一样let validateCheckpwd = (rule, value, callback) => {if (value === this.ruleForm2.newPwd) {callback();} else {callback(new Error("密码不一"));}};return {ruleForm2: {oldPwd: "",newPwd: "",checkPass: ""},rules2: {oldPwd: [{ required: true, message: "请输入账号", trigger: "blur" },{ validator: validatePass, trigger: "blur" }],newPwd: [{ required: true, message: "请输入新密码", trigger: "change" },{ validator: validateNewpwd, trigger: "change" }],checkPass: [{ required: true, message: "请确认密码", trigger: "change" },{ validator: validateCheckpwd, trigger: "change" }]}};},// 提交验证methods: {submitForm(formName) {this.$refs.ruleForm2.validate(valid => {if (valid) {editpwd(this.ruleForm2.newPwd).then(res => {if (res.data.code === 0) {this.$router.push("/login");}});}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
</script><style lang="scss" scoped>
</style>

相关文章:

修改密码和再次确认密码的js和element-ui的使用

<template><div><!-- plan的插槽 --><plan title"修改密码"><!-- 插槽的名字 --><span slot"header">修改密码</span><el-form:model"ruleForm2"status-icon:rules"rules2"ref"rul…...

蓝桥杯专题-真题版含答案-【垒骰子_动态规划】【抽签】【平方怪圈】【凑算式】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…...

kubernetes调试利器——kubectl debug工具

通常情况下&#xff0c;业务容器所使用的镜像是非常精简的&#xff0c;而一旦业务容器出现问题&#xff0c;通过kubectl exec进入到容器时&#xff0c;我们会发现自己需要使用的工具都没有&#xff0c;也无法通过apt, apt-get, yum等包管理工具下载需要的工具。 想要解决这个尴…...

浅谈es5如何保证并发请求的返回顺序

最近在公司实习写的是es5&#xff0c;在和回调地狱经过一番拉扯之后写下这篇文章&#xff0c;也算是体验了一把没有promise的时代 假设我们的div有一个日历列表&#xff0c;但是由于大小关系只能每次显示2天的信息&#xff0c;项目限制只能使用es5&#xff0c;不能使用es6的pro…...

深入浅出Pytorch函数——torch.squeeze

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.squeeze 深入浅出Pytorch函数——torch.unsqueeze 将输入张量形状为1的维度去除并返回。比如输入向量的形状为 A 1 B 1 C 1 D A\times1\times B\times1\times C…...

【LeetCode】121.买卖股票的最佳时机

题目 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的最大…...

【力扣】74. 搜索二维矩阵 <二分法>

【力扣】74. 搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非递减顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&am…...

Spring Task+Cron表达式

不需要导入坐标spring-context&#xff08;包含在了spring-boot-starter&#xff09; 在启动类添加EnableScheduleing开启任务调度 单独建个定时任务包task&#xff0c;创建定时任务类MyTask 在定时任务类添加Component 在类的方法上添加Scheduled&#xff08;cron “cron表达…...

你们公司的【前端项目】是如何做测试的?字节10年测试经验的我这样做的...

前端项目也叫web端项目&#xff08;通俗讲就是网页上的功能&#xff09;是我们能够在屏幕上看到并产生交互的体验。 前端项目如何做测试&#xff1f; 要讲清楚这个问题&#xff0c;先需要你对测试流程现有一个全局的了解&#xff0c;先上一张测试流程图&#xff1a; 测试流程…...

华为战略方法论:BLM模型之关键任务与依赖关系

内容简介 在 BLM 模型中&#xff0c;执行部分包括四个模块&#xff0c;分别是&#xff1a; 关键任务与依赖关系&#xff1b;组织与绩效&#xff1b;人才&#xff1b;氛围与文化。 详细内容&#xff0c;大家可以参看下面这张图。 这四个模块其实是可以进一步划分成两个关键点…...

django的ORM模板的fake更新

django存量数据表的migraions记录丢失&#xff0c;若要更新表结构&#xff0c;则需用到fake&#xff0c;否则报错&#xff1a; 解决步骤如下&#xff1a; 1&#xff09;同步存量表结构&#xff0c;生成伪表 --fake sudo python3 manage.py makemigrations appname sudo pyt…...

239.滑动窗口最大值

leetcode原题链接 题目描述&#xff1a; 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例1: 输入&#xff1a;nums [1,…...

Redis基础原理

1 概念 1.1 关系型数据库与非关系型数据库对比 关系型数据库Mysql、Oralce特点数据之间有关联&#xff1b;数据存储在硬盘上效率操作关系型数据库非常耗时 非关系型数据库redis、hbase存储key:value特点数据之间没有关联关系&#xff1b;数据存储在内存中缓存思想从缓存中获…...

.NET 5 Web API 中JWT详细教程:保护你的Web应用

第一部分&#xff1a; 理解JWT JSON Web Token&#xff08;JWT&#xff09;是一种在不同系统之间传递信息的安全方式。它由三部分组成&#xff1a;头部&#xff08;Header&#xff09;、载荷&#xff08;Payload&#xff09;和签名&#xff08;Signature&#xff09;。头部包…...

MyBatis-Plus自动填充

文章目录 一、前言二、MyBatis-Plus自动填充功能实现2.1、实体类上增加注解2.2、自定义填充类编写 一、前言 我们在建表的时候&#xff0c;所有的表都会有create_id&#xff08;创建人id&#xff09;、create_time&#xff08;创建时间&#xff09;、update_id&#xff08;更新…...

Dubbo服务提供者失效踢出原理解析

Dubbo服务提供者失效踢出原理解析 在分布式系统中&#xff0c;服务提供者的失效是一个常见而且重要的问题。Dubbo作为一款优秀的分布式服务框架&#xff0c;提供了失效踢出机制来及时剔除不可用的服务提供者&#xff0c;确保系统的稳定性和可用性。本文将深入探讨Dubbo服务提供…...

el-select下拉框处理分页数据,触底加载更多

1、声明自定义指令&#xff1a; directives: {loadmore: {inserted(el, binding) {const SELECTWRAP_DOM el.querySelector(.el-select-dropdown .el-select-dropdown__wrap);SELECTWRAP_DOM.addEventListener(scroll, function() {const condition this.scrollHeight - thi…...

如何设计自动化测试脚本?一文5个步骤带你从0到1设计

企业中如何设计自动化测试脚本呢&#xff1f;今天我们就来为大家分享一些干货。 一、线性设计 线性脚本设计方式是以脚本的方式体现测试用例&#xff0c;是一种非结构化的编码方式&#xff0c;多数采用录制回放的方式&#xff0c;测试工程师通过录制回访的访问对被测系统进行自…...

PostgreSQL实战-数据库迁移部署

PostgreSQL实战-数据库迁移部署 介绍 根据项目需求&#xff0c;我们需要将现有的PostgreSQL数据库重新部署到新的服务器上。由于项目本身就是基于PostgreSQL数据库构建的&#xff0c;因此数据库迁移将变得十分便捷。接下来&#xff0c;我将简要介绍我们的迁移步骤。 迁移步骤…...

PHP数据库

PHP MySQL 连接数据库 MySQL 简介MySQL Create 免费的 MySQL 数据库通常是通过 PHP 来使用的。 连接到一个 MySQL 数据库 在您能够访问并处理数据库中的数据之前&#xff0c;您必须创建到达数据库的连接。 在 PHP 中&#xff0c;这个任务通过 mysql_connect() 函数完成。 …...

零基础玩转mxbai-embed-large-v1:6大核心功能实战,从向量化到摘要生成

零基础玩转mxbai-embed-large-v1&#xff1a;6大核心功能实战&#xff0c;从向量化到摘要生成 1. 引言&#xff1a;为什么选择mxbai-embed-large-v1&#xff1f; mxbai-embed-large-v1是当前自然语言处理领域的一颗新星&#xff0c;这款多功能句子嵌入模型在MTEB基准测试中表…...

药物研发新思路:共价对接工具AutoDock4实战指南(附避坑技巧)

药物研发新思路&#xff1a;共价对接工具AutoDock4实战指南&#xff08;附避坑技巧&#xff09; 在当今药物研发领域&#xff0c;共价抑制剂因其独特的作用机制和显著的治疗优势正受到前所未有的关注。与传统非共价药物相比&#xff0c;这类分子能与靶蛋白形成稳定的共价键&…...

猫抓cat-catch:高效媒体捕获与资源下载全指南

猫抓cat-catch&#xff1a;高效媒体捕获与资源下载全指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓cat-catch是一款专注于网页媒体资源捕…...

4款GitHub热门浏览器自动化工具横向评测:哪款最适合你的开发需求?

4款GitHub热门浏览器自动化工具横向评测&#xff1a;哪款最适合你的开发需求&#xff1f; 在数字化转型浪潮中&#xff0c;浏览器自动化已成为提升开发效率的关键技术。无论是日常的数据采集、自动化测试&#xff0c;还是复杂的AI代理交互&#xff0c;选择一款合适的工具往往能…...

跨平台启动盘制作利器:WinDiskWriter技术解析与应用指南

跨平台启动盘制作利器&#xff1a;WinDiskWriter技术解析与应用指南 【免费下载链接】windiskwriter &#x1f5a5; Windows Bootable USB creator for macOS. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot requirements. &#x1f47e; UEFI & Legacy…...

忍者像素绘卷微信小程序集成指南:轻量API调用与像素输出适配

忍者像素绘卷微信小程序集成指南&#xff1a;轻量API调用与像素输出适配 1. 项目概述与核心价值 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工具&#xff0c;专为16-Bit复古游戏美学风格设计。它通过轻量级API服务&#xff0c;让开发者能够快速将像素艺术生成能…...

LeetCode26. 删除有序数组中的重复项 27. 移除元素 35. 搜索插入位置 数组,双指针 二分查找

给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。考虑 nums 的唯一元素的数量为 k。去重后&#xf…...

1688图搜接口有复购率对于选品的你们有帮助吗

1688 图搜接口的复购率数据&#xff0c;对选品非常有帮助&#xff0c;是判断商品长期生命力与供应链稳定性的核心指标。一、复购率在图搜选品中的核心价值验证商品质量与用户粘性高复购率&#xff08;B 端通常 > 20%&#xff0c;优秀 > 30%&#xff09;直接证明商品质量稳…...

农业遥感避坑指南:用大疆P4M多光谱数据生成NDVI,选智图还是Metashape?

农业遥感实战&#xff1a;大疆P4M多光谱数据NDVI生成工具选型指南 站在农田边缘&#xff0c;手持大疆精灵4多光谱版&#xff08;P4M&#xff09;遥控器的你&#xff0c;刚刚完成了一次作物长势监测飞行。无人机带回的宝贵数据&#xff0c;正等待转化为直观的NDVI图——这张&quo…...

SDXL 1.0工坊应用场景:短视频团队低成本制作分镜概念图

SDXL 1.0工坊应用场景&#xff1a;短视频团队低成本制作分镜概念图 1. 引言&#xff1a;短视频创作的痛点与新解法 对于短视频团队来说&#xff0c;创意是灵魂&#xff0c;但将创意快速、低成本地可视化&#xff0c;却常常是个难题。尤其是在前期策划阶段&#xff0c;制作分镜…...