欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

修改密码的实现 -- element UI

程序员文章站 2022-03-07 22:02:56
直接上代码

效果图

修改密码的实现 -- 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' }],
        },
    }
},

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

参数说明

参数 说明
label-position label的对齐方式
show-password 是否显示切换密码图标
autocomplete 原生属性,自动补全
  • autocomplete="off" 可避免浏览器对输入框的自动填充

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

本文地址:https://blog.csdn.net/elephant_my/article/details/112553636

相关标签: 安寓项目 vue.js