修改密码的实现 -- element UI

效果图

直接上代码

<el-form :model = "ruleForm" :rules = "rules" ref = "ruleForm" :label-position="labelPosition" class = "ruleForm">
    <el-form-item label = "新密码" prop = "password">
        <el-input size="small" placeholder="请输入密码" v-model="ruleForm.password" show-password autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label = "确认密码" prop = "confirm">
        <el-input size="small" placeholder="请确认密码" v-model="ruleForm.confirm" show-password autocomplete="off"></el-input>
    </el-form-item>
</el-form>

data() {
   let validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
        }
    };
    let validateCheckPass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    return {
        ruleForm: {
            pass: null,
            checkPass: null,
        },
        rules: {
            pass: [{ validator: validatePass, trigger: 'blur' }],
            checkPass: [{ validator: validateCheckPass, trigger: 'change' }],
        },
    }
},

上述实现需要注意的是：密码pass的trigger设为blur，确认密码的trigger设为change；
因为，若两者的trigger都设为blur，会出现：确认密码框不能实时的检测两者的输入内容是否一致；
若两者的trigger都设为change，会出现：输入密码的时候，确认密码框就开始检测，即使此时并没有触发确认密码的输入框。

参数说明

参数	说明
label-position	label的对齐方式
show-password	是否显示切换密码图标
autocomplete	原生属性，自动补全

• autocomplete="off" 可避免浏览器对输入框的自动填充

---

若autocomplete="off"不起作用时，可修改为autocomplete="new-password"。