文章来源地址https://www.toymoban.com/news/detail-607691.html
<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>
文章来源:https://www.toymoban.com/news/detail-607691.html
到了这里,关于修改密码和再次确认密码的js和element-ui的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!