（vue+element ui）表单item中包含多个必填项

image.png

项目中 有这么一个需求 这两个表单项 都要验证两条必填验证规则 就是说 两个下拉框选中其中一个或者都不选，都不满足必填需求。

代码如下：

<el-form-item label="城市：" class="cityList" prop="selectProValue">
  <!-- 城市 -->
  <el-select v-model="form.selectProValue" placeholder="请选择" @change="proValueChange">
    <el-option v-for="(province, index) in provinceList" :key="index" :label="province" :value="province"></el-option>
  </el-select>
  <!-- 城市下地区 -->
  <el-select v-model="form.selectCityValue" placeholder="请选择" @change="onCityRules">
    <el-option v-for="(city, index) in cityList" :key="index" :label="city" :value="city"></el-option>
  </el-select>
</el-form-item>

验证规则方法：
item中给其中一个下拉框字段添加验证规则，通过自定义validator验证规则 校验这个字段，在自定义校验规则中，对第二个必填项进行校验，两个必填项必须都要通过。

export default {
  data () {
     // 自定义城市验证规则
    var cityRule = (rule, value, callback) => {
      console.log(value)
      console.log(this.form.selectCityValue)
      // value 就是 验证那个字段 为空 或者 selectCityValue 为空 验证都不会通过
      if (value === '' || this.form.selectCityValue === '') {
        return callback(new Error('请选择地区！'))
      } else {
        callback()
      }
    }
  }
  return {
    // 表单验证规则
    formRules: {
       // 城市地区验证规则 只需要添加第一个字段的验证规则
       selectProValue: [
         { required: true, validator: cityRule, trigger: 'change' }
       ]
    }
  }
}

成功效果：

两个下拉框是级联的，只能选中第一个才可以选第二个
两个都选择就会通过校验