修改密码的实现 -- element UI
程序员文章站
2022-03-07 22:02:56
直接上代码
效果图
直接上代码
<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"
。
本文地址:https://blog.csdn.net/elephant_my/article/details/112553636
上一篇: Android -从浅到懂使用反射机制
下一篇: watch中的深度监听
推荐阅读
-
vue+axios+element ui 实现全局loading加载示例
-
element-ui 时间选择器限制范围的实现(随动)
-
spring security 5.x实现兼容多种密码的加密方式
-
浅谈AnDroidDraw+DroidDraw实现Android程序UI设计的分析说明
-
html5超简单的localStorage实现记住密码的功能实现
-
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
-
linux修改root密码和linux忘记root密码后找回密码的方法
-
支付宝漏洞曝光:熟人可以100%修改你的支付宝密码!
-
element-ui组件中input等的change事件中传递自定义参数
-
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)