基本需求
输入框不能为空
旧密码表单提交时必须正确
两次输入新密码一致
限定新密码的复杂度，这里是长度在 6 到 20 个字符

<template><el-form ref="form" :model="user" :rules="rules" label-width="80px"><el-form-item label="旧密码" prop="oldPassword"><el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" /></el-form-item><el-form-item label="新密码" prop="newPassword"><el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" /></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" /></el-form-item><el-form-item><el-button type="primary" size="mini" @click="submit">保存</el-button><el-button type="danger" size="mini" @click="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("两次输入的密码不一致"));} else {callback();}};return {test: "1test",user: {oldPassword: undefined,newPassword: undefined,confirmPassword: undefined},// 表单校验rules: {oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" },{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],confirmPassword: [{ required: true, 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.msgSuccess("修改成功");});}});},close() {this.$store.dispatch("tagsView/delView", this.$route);this.$router.push({ path: "/task/tasks" });}}
};
</script>