Bootstrap

elementui表单验证:2个关联,2个不填为非必填,但填写了一个后另一个也得为必填项

关键:在prop后面添加rules判断

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name" :rules="ruleForm.pass ? rules.name:[{required:false}]">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass" :rules="ruleForm.name ? rules.pass:[{required:false}]">
            <el-input v-model="ruleForm.pass"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                pass: '',
            },
            rules: {
                name: [{ required: true, message: '姓名', trigger: 'blur' }],
                pass: [{ required: true, message: '密码', trigger: 'change' }],
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

动态添加的两个关联:

关键:在生成的数据添加两个布尔值(只能想到这么做了)
在这里插入图片描述

<template>
    <el-form :model="ruleForm" ref="ruleForm" label-position="left">

        <div class="relContent" v-for="(domain, index) in ruleForm.relationAos" :key="index">
            <el-form-item label="企业名称" :prop="'relationAos.' + index + '.bankId'" :rules="{ validator: (rule, value, callback)=>{bankIdValidator(rule, value, callback,domain)}, trigger: 'change'}" style="display: inline-block;">
                <el-select v-model="domain.bankId" clearable style="width: 92%;">
                    <el-option v-for="(item, index) in bankIdList" :key="index" :label="item.clientName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="特殊(金额/万元)" :prop="'relationAos.' + index + '.dataValue'" :rules="{validator: (rule, value, callback)=>{dataValueValidator(rule, value, callback,domain)}, trigger: 'change'}" style="display: inline-block;margin-right: 5px;">
                <el-input v-model.trim="domain.dataValue" clearable></el-input>
            </el-form-item>
            <div class="tabs-title">
                <div class="add-icon">
                    <span class="el-icon-plus" @click="addDomain" v-if="index===0"></span>
                    <span class="el-icon-minus" @click.prevent="removeDomain(domain)" v-if="ruleForm.relationAos.length>1"></span>
                </div>
            </div>
        </div>

        <el-form-item>
            <el-button type="primary" size="mini" @click="submitForm('ruleForm')">确 定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                relationAos: [{ bankId: '', dataValue: '', requiredId: false, requiredValue: false }]
            },
            bankIdList: [
                { clientName: "1", id: 1 },
                { clientName: "2", id: 2 },
                { clientName: "3", id: 3 },
            ]
        }
    },
    methods: {
        bankIdValidator(rule, value, callback, domain) {
            domain.requiredValue = value ? true : false
            if (domain.requiredId) {
                (!value) ? callback(new Error('请选择企业名称')) : callback()
            } else {
                callback()
            }
        },
        dataValueValidator(rule, value, callback, domain) {
            domain.requiredId = value ? true : false
            if (domain.requiredValue) {
                if (!value) {
                    callback(new Error('请输入金额'))
                } else if (isNaN(value)) {
                    callback(new Error('请输入数字值'))
                } else {
                    callback()
                }
            } else {
                callback()
            }
        },
        removeDomain(item) {
            let index = this.ruleForm.relationAos.indexOf(item)
            if (index !== -1) {
                if (this.ruleForm.relationAos.length > 1) {
                    this.ruleForm.relationAos.splice(index, 1)
                }
            }
        },
        addDomain() {
            this.ruleForm.relationAos.push({ bankId: '', dataValue: '', requiredId: false, requiredValue: false })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('success!')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>

<style scoped>
    .el-form-item__content {
        width: 214;
        display: inline-block;
    }
    .tabs-title {
        display: inline-block;
    }
    .light .tabs-title div span:last-child,
    .drak .tabs-title div span:last-child {
        margin-left: 0;
    }
    .el-dialog__body {
        max-height: 600px;
        overflow-y: auto;
    }
</style>

;