el-form中一个el-form-item需要规则校验多个input

最新推荐文章于 2024-03-07 11:03:58 发布

高高baby

最新推荐文章于 2024-03-07 11:03:58 发布

阅读量663

点赞数 8

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/gaoyan426926/article/details/135535186

版权

我的数据的格式：

formData: {
    ipAddress: {
        one: '',
        two: '',
    },
},

代码结构：

<el-form-item label="IP地址" prop="ipAddress">
    <el-input-number
        v-model="formData.ipAddress.one"
        class="ip-address"
        :controls="false"
        :precision="0"
        :max="255"
        :min="0"
    />
    <el-input-number
        v-model="formData.ipAddress.one"
        class="ip-address"
        :controls="false"
        :precision="0"
        :max="255"
        :min="0"
    />
</el-form-item>

规则示例：

rules: {
    ipAddress: [{ required: true, validator: this.checkMultiInput, trigger: 'blur' }]
}

methods中：

checkMultiInput(rule, value, callback) {
    let allFieldsFilled = true;
    Object.keys(this.formData.ipAddress).forEach((key) => {
        if (!this.formData.ipAddress[key] && this.formData.ipAddress[key] !== 0) {
            allFieldsFilled = false;
        }
    });
    if (!allFieldsFilled) {
       callback(new Error('IP地址不能为空'));
    } else {
        callback();
    }
},

效果图：