当你点到这篇文章,说明你也有类似的需求,希望此篇文章能对你有帮助。
1,需要验证的树型结构如下:
formData:{
"description": "",
"config_source_bos":[{
"value":"",
"source_param_bos":[{
"value1":"",
}]
}]
}
2,已vue为例来说明
对 "description": "",属性使用正常验证就行
主要针对"config_source_bos"里面的属性进行验证:
图:
代码:
html:
<el-form :model="formData" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="description"
label="描述"
:rules=
"{ required: true, message: '请输入描述', 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;
}
});
},
直接考过去验证,如果对你有帮助的话,点赞加关注哦!转载注明出处