<el-dialog title="修改密码" :visible.sync="dialogTableVisible" :fullscreen="true" :show-close="false"
:close-on-click-modal="false" >
<el-form ref="form" label-width="80px" :rules="rules" :model="user">
<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="modifyPwd">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
// 版本号
version: "3.2.1",
dialogTableVisible: false,
currentUser:{},
currentUserId:undefined,
user: {
newPassword: undefined,
confirmPassword: undefined
},
// 表单校验
rules: {
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 8, max: 12, message: "长度在 8 到 12个字符", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
VUE Element-UI 用户修改和重置密码时,新密码和密码确认失去焦点的时候不一致的校验
最新推荐文章于 2024-06-29 10:05:11 发布