<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="550px"
:before-close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
<el-form-item label="旧密码" prop="old">
<el-input v-model="form.old"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="new">
<el-input v-model="form.new"></el-input>
</el-form-item>
<el-form-item label="确定密码" prop="submit">
<el-input v-model="form.submit"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
dialogVisible: {
require: true,
},
title: {
default: "修改密码",
},
},
data() {
return {
form: {},
rules: {
old: [
{ required: true, message: "请输入旧密码", trigger: "blur" },
{ min: 3, max: 8, message: "密码为3~8个字符", trigger: "blur" },
],
new: [
{ required: true, message: "请输入新密码", trigger: "blur" },
{ min: 3, max: 8, message: "密码为3~8个字符", trigger: "blur" },
],
submit: [
{
required: true,
message: "请再次输入新密码",
trigger: "blur",
},
{
validator: this.fnvalidate,
trigger: "blur",
},
],
},
};
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.handleClose();
} else {
console.log("false");
return false;
}
});
},
handleClose() {
this.$refs.form.resetFields();
this.$emit("update:dialogVisible", false);
},
fnvalidate(rule, val, callback) {
if (val == "") {
callback(new Error("请重复新密码"));
} else if (val !== this.form.new) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
},
},
};
</script>
<style scoped lang="scss"></style>
vue2 修改密码弹框及验证
最新推荐文章于 2024-06-27 17:33:04 发布
本文介绍了如何使用Vue.js中的El-Dialog组件创建一个用于修改密码的对话框,并实现旧密码、新密码和确认密码的表单验证功能。
摘要由CSDN通过智能技术生成