vue后台管理修改密码
2024-01-09 18:35:38
<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>
判断旧密码输入的是否正确是后端判断返回的,前端处理,输入的两次密码是否一直即可,使用自定义表单校验
文章来源:https://blog.csdn.net/m0_61265297/article/details/135483962
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!