Element ui Form表单确定密码效验方式rules

引用弹窗

<template>
    <el-dialog title="验证码支付密码" :visible="visible" width="600px" append-to-body @close="cancel">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入新密码" type="password" clearable class="width90" />
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordAgain">
                <el-input v-model="form.passwordAgain" placeholder="请输入确认密码" type="password" clearable class="width90" />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import { api} from '@/api/wallet/wallet';
export default {
    props: {
        open: Boolean,
        type: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                password: [
                    { required: true, trigger: 'blur', message: '新密码不能为空' },
                    { validator: this.formValidate.number6Password, trigger: 'blur' }
                ],
                passwordAgain: [
                    { required: true, trigger: 'blur', message: '确认密码不能为空' },
                    {
                        validator: (rules, value, callback) => {
                            if (value !== this.form.password) callback(new Error('确认密码与新密码不一致'))
                            callback()
                        }, trigger: 'blur'
                    }
                ]
            }
        };
    },
    computed: {
        visible: {
            get() {
                return this.open;
            },
            set(v) {
                this.$emit('update:open', v);
            }
        }
    },
    methods: {
        // 提交按钮
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    try {
                        api({
                            password: this.form.password
                        }).then((res) => {
                            this.msgSuccess('成功');
                            this.cancel()
                        })
                    } catch (error) {
                        console.log(error, 'error')
                    }
                }
            });
        },
        // 取消按钮
        cancel() {
            this.close();
            this.reset();
        },
        // 关闭弹窗
        close() {
            this.$emit('update:open', false);
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm('form');
        }
    }
};
</script>
  
<style lang="scss" scoped>
.width90 {
    width: 90%;
}
</style>