當(dāng)你點(diǎn)到這篇文章，說(shuō)明你也有類似的需求，希望此篇文章能對(duì)你有幫助。
1，需要驗(yàn)證的樹(shù)型結(jié)構(gòu)如下：

formData:{
    "description": "", 
    "config_source_bos":[{
        "value":"",
        "source_param_bos":[{ 
            "value1":"", 
        }]
    }]
}

2，已vue為例來(lái)說(shuō)明
對(duì) "description": "",屬性使用正常驗(yàn)證就行
主要針對(duì)"config_source_bos"里面的屬性進(jìn)行驗(yàn)證：
圖：

image.png

代碼：
html:

<el-form :model="formData" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="description"
    label="描述"
    :rules=
      "{ required: true, message: '請(qǐng)輸入描述',       trigger: 'blur' }">
    <el-input v-model="formData.description"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in formData.config_source_bos"
    :label="'域名'"
    :key="index"
    :prop="'config_source_bos.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能為空', trigger: 'blur'
    }">
    <el-input v-model="domain.value"></el-input>
       <el-form-item
    v-for="(domain1, index1) in domain.source_param_bos"
    :label="'域名Child'+index1"
    :key="index1"
    :prop="'config_source_bos.' + index + '.source_param_bos.' + index1 + '.value1'"
    :rules="{
      required: true, message: '域名不能為空', trigger: 'blur'
    }" >
    <el-input v-model="domain1.value1"></el-input>
                                               
  </el-form-item>                                          
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
  </el-form-item>
</el-form>

js:提交

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

直接考過(guò)去驗(yàn)證，如果對(duì)你有幫助的話，點(diǎn)贊加關(guān)注哦！轉(zhuǎn)載注明出處