需求场景：当一个 Form-Item 下有多个输入框或者一个选择框时，同时该 Form-Item 为必填项，我们应该如何验证其下的各个输入框/选择框呢？ 

方案一：

<div class="flex-row">
  <el-form-item label="加班标准" required>
    <div class="flex-row">
      <el-form-item prop="overtime1">
        <el-input v-model="form.overtime1"></el-input>
      </el-form-item>
      <el-form-item prop="overtime2">
        <el-input v-model="form.overtime2"></el-input>
      </el-form-item>
    </div>
  </el-form-item>
</div>

我们只需在Form-Item 上添加 required，同时再嵌套一层Form-Item，设置prop 属性，在 rule规则里，验证其输入规则就行了。

更多细节，请详细阅读element-ui form 组件

方案二：

<div class="flex-row">
  <el-form-item label="加班标准" prop="overtime1">
    <el-input v-model="form.overtime1"></el-input>
    <el-input v-model="form.overtime2"></el-input>
  </el-form-item>
</div>

如何校验上述输入框必填呢？

rules: {
  overtime1: [{ required: true, validator: checkOvertime, trigger: 'blur'}],
}

我们这里只对其中一个输入框做了必填的判断，而在 checkOvertime 方法中，判断另一个输入框，直到两个输入框都有值，才能通过。

// data
var checkOvertime = (rule, value, callback) => {
  let overtime2 = this.$refs.overtime2.value;
  if (value && overtime2) {
    callback()
  } else {
    if (!value) {
      callback(new Error('请输入加班一个工'))
    }
    if (!overtime2) {
      callback(new Error('请输入加班半个工'))
    }
  }
}