08-表单校验之联动校验（下拉框的某个选项触发另一项要校验）

 

 需求：

1. 字段类型本身是有需要必选的校验，只有当且选择数据字典时，才会动态的触发来源字典的校验（必填），反之，去除来源字典的校验。

2. 当下拉框选择数据字典后，触发了来源字典的校验，这时候来源字典满足校验后，会移除错误提示信息，反之，没有输入任何内容失焦后又会重新触发校验；当下拉框切换为非数据字典的选项时，又执行上面第一条的校验逻辑

3.当下拉框选择数据字典时，来源字典会动态展示红星( * )，反之，不显示红星； 红星是为了跟element的form表单风格保持一致。（需要自己手动实现，因为不会实时触发视图更新）

实现效果：

来源字典输入后，符合校验，隐藏了错误提示；清空后又重新触发了必填校验

---

 代码实现：

 data() {
    return {
      formObj: {
        fieldType: '',   //字段类型下拉框
        sourceDict: '', //来源字典
      },
}

   <el-row :gutter="110">
            <el-col :span="12">
              <el-form-item label="字段类型" prop="fieldType">
                <el-select
                  v-model="formObj.fieldType"
                  style="width: 100%"
                  placeholder="请选择"
                  @blur="blurSelect('fieldType')"
                  @change="blurSelect('fieldType')"
                >
                  <el-option v-for="item in fieldTypeSelectData" :key="item.id" :label="item.itemText" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="sourceDict_box">
                <i v-if="formObj.fieldType === '4'" class="star">*</i>   //红*
                <el-form-item style="padding-left: 6px" label="来源字典" prop="sourceDict">
                  <el-input v-model="formObj.sourceDict"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

  watch: {
    formObj: {
      deep: true,
      handler(val) {
        if (Number(val.fieldType) === 4 && val.sourceDict === '') {
          this.formblurRequiredRuleFn({    //此为封装的必填方法
            sourceDict: ['来源字典', '输入']
          })
          this.$refs.ruleForm.validateField('sourceDict') //单独触发校验
        } else {
          this.$refs.ruleForm.clearValidate(['sourceDict']) //移除校验
        }
      }
    }
  },

红星样式：

.sourceDict_box {
  position: relative;
  .star {
    position: absolute;
    left: -5px;
    top: 11px;
    color: #f56c6c;
    font-size: 20px;
  }
}