<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://www.toymoban.com/news/detail-781357.html
判断旧密码输入的是否正确是后端判断返回的,前端处理,输入的两次密码是否一直即可,使用自定义表单校验文章来源地址https://www.toymoban.com/news/detail-781357.html
到了这里,关于vue后台管理修改密码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!