当前位置: 首页 > 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>
http://www.lryc.cn/news/97459.html

相关文章:

  • 蓝桥杯专题-真题版含答案-【垒骰子_动态规划】【抽签】【平方怪圈】【凑算式】
  • kubernetes调试利器——kubectl debug工具
  • 浅谈es5如何保证并发请求的返回顺序
  • 深入浅出Pytorch函数——torch.squeeze
  • 【LeetCode】121.买卖股票的最佳时机
  • 【力扣】74. 搜索二维矩阵 <二分法>
  • Spring Task+Cron表达式
  • 你们公司的【前端项目】是如何做测试的?字节10年测试经验的我这样做的...
  • 华为战略方法论:BLM模型之关键任务与依赖关系
  • django的ORM模板的fake更新
  • 239.滑动窗口最大值
  • Redis基础原理
  • .NET 5 Web API 中JWT详细教程:保护你的Web应用
  • MyBatis-Plus自动填充
  • Dubbo服务提供者失效踢出原理解析
  • el-select下拉框处理分页数据,触底加载更多
  • 如何设计自动化测试脚本?一文5个步骤带你从0到1设计
  • PostgreSQL实战-数据库迁移部署
  • PHP数据库
  • Mybatis的基本操作--增删改查
  • Qt简单实现密码器控件
  • fpga_pwm呼吸灯(EP4CE6F17C8)
  • WPF实战学习笔记20-设置首页启动页
  • uniapp实现预约时间选择弹窗组件
  • opencv 之 外接多边形(矩形、圆、三角形、椭圆、多边形)使用详解
  • 断路器分合闸速断试验
  • 【Redis】如何实现一个合格的分布式锁
  • 组件化开发复习
  • 【设计模式】设计原则-里氏替换原则
  • v2ex站点base64编码解码