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

发布时间:2024年01月11日

我的数据的格式:

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();
    }
},

效果图:

文章来源:https://blog.csdn.net/gaoyan426926/article/details/135535186
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。