vue框架，ant design实现账号密码修改
在进行修改的界面
modify.vue中：
<template><div class="rest-container"><h2 style="color:#3861ff;">初始账号密码重置</h2><div class="form-content"><!--表单验证会用上这个变量--><a-formref="restFormRef":label-col="{span: 4,offset: 0}":model="restFormModel":rules="restRules"label-align="left"><a-form-itemlabel="手机号:"name="phone"><a-inputv-model:value="restFormModel.phone"placeholder="请输入手机号"/></a-form-item><a-form-itemlabel="原密码:"name="passWord"><a-input-passwordv-model:value="restFormModel.passWord"placeholder="请输入旧密码"/></a-form-item><a-form-itemlabel="新密码:"name="newPassword"><a-input-passwordv-model:value="restFormModel.newPassword"placeholder="请输入新密码"/></a-form-item><a-form-itemlabel="确认密码:"name="secondPassword"><a-input-passwordv-model:value="restFormModel.secondPassword"placeholder="请再次输入密码"/></a-form-item></a-form></div><a-button @click="rest">重置密码</a-button></div></template><script setup>import { reactive, ref } from 'vue';import { modifyPassWord } from '@/api/D-login.js';import useStore from '@/store/index.js';const { user, } = useStore()const restFormModel = reactive({phone: '',passWord: '',newPassword: '',secondPassword: '',})// eslint-disable-next-line require-awaitconst validatePass = async(_rule, value) => {// 二次验证const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z]{8,16}$/;const a = regex.test(value)if (value === '') {return Promise.reject('新密码不能为空');} else {if (!a) {return Promise.reject('请输入字符大小写和数字组合，至少八位');}return Promise.resolve();}};// eslint-disable-next-line require-awaitconst testPass = async(_rule, value) => {// 二次验证console.log(restFormModel.newPassword)console.log(value)if (value !== restFormModel.newPassword) {return Promise.reject('两次输入密码不一致');} else {if (restFormModel.newPassword === '') {return Promise.reject('确认密码不能为空');}}return Promise.resolve();};const restRules = reactive({phone: [{required: true,message: '请输入手机号',trigger: 'change',},],passWord: [{required: true,message: '请输入原密码',trigger: 'change',},],newPassword: [{validator: validatePass,required: true,trigger: 'change',},],secondPassword: [{validator: testPass,required: true,trigger: 'change',},],})const restFormRef = ref()const rest = () => {const theLogin = reactive({phone: restFormModel.phone,passWord: restFormModel.newPassword,})if (restFormRef.value) {restFormRef.value.validate().then(async() => {const res = await modifyPassWord({'entity': {'phone': restFormModel.phone,'passWord': restFormModel.passWord,'newPassword': restFormModel.newPassword,},})if (res.data.rsp_code === 0) {await user.login(theLogin)}})}}
注意：await user.login(theLogin)是登录的函数，你也可以把他替换成await router.push(‘/’)跳转到登录界面。如果要删除它，记得这个
const theLogin = reactive({phone: restFormModel.phone,passWord: restFormModel.newPassword,})
也得删除。
