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

 需求：

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

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

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

实现效果：

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

 代码实现：

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

   
            
              
                select
                  v-model="formObj.fieldType"
                  style="width: 100%"
                  placeholder="请选择"
                  @blur="blurSelect('fieldType')"
                  @change="blurSelect('fieldType')"
                >
                  for="item in fieldTypeSelectData" :key="item.id" :label="item.itemText" :value="item.id">
                  
                
              
            
            
              

                if="formObj.fieldType === '4'" class="star">*   //红*
                
                  
                
              
            
          

  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;
  }
}