![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ebf0cc2eac5b960f919882662550a9be.png)
<el-form
ref="pNextFormRef"
:model="pNextForm"
:rules="pNextFormRules"
class="form"
>
<el-form-item prop="password">
<el-input
v-model="pNextForm.password"
placeholder="请输入密码"
type="password"
></el-input>
<img
class="login-icon"
src="../../assets/images/password.png"
alt=""
/>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="pNextForm.confirmPassword"
placeholder="请再次输入密码"
type="password"
></el-input>
<img
class="login-icon"
src="../../assets/images/password.png"
alt=""
/>
</el-form-item>
<el-button class="button" @click="pSubmit()">确定</el-button>
</el-form>
<script>
export default {
data() {
var PasswordValid = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.pNextForm.confirmPassword !== "") {
this.$refs.pNextFormRef.validateField("confirmPassword");
}
callback();
}
};
var comfirmPasswordVaild = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.pNextForm.password) {
console.log(value);
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
pNextFormRules: {
password: [{ validator: PasswordValid, trigger: "blur" }],
confirmPassword: [{ validator: comfirmPasswordVaild, trigger: "blur" }],
},
pNextForm: {
password: "",
confirmPassword: "",
},
status: 0,
};
},
methods: {
pSubmit() {
this.$refs["pNextFormRef"].validate((valid) => {
if (valid) {
if (this.status == 0) {
} else {
}
} else {
return false;
}
});
},
},
};
</script>
.form {
.login-icon {
width: 16px;
height: 16px;
position: absolute;
top: 14px;
left: 16px;
}
/deep/.el-form-item {
margin-bottom: 30px;
.el-form-item__content {
position: relative;
.el-input__inner {
padding-left: 40px;
height: 44px !important;
line-height: 44px;
}
}
}
/deep/.login-item.el-form-item {
margin-bottom: 20px;
}
.button {
width: 100%;
height: 44px;
background: #20aee5;
border-radius: 4px;
color: #fff;
font-size: 18px;
font-family: MicrosoftYaHei;
}
}