表单多个输入框校验

表单里一层for循环里多个输入框校验

// 数据结构：dynamicValidateForm：{domains: [{msg:'',content:''},....]}
// model绑定的必须是个对象
<a-form-model:labelCol="{ span: 12 }"ref="dynamicValidateForm"@submit="handleSubmit":model="dynamicValidateForm"
><a-col v-for="(domain, index) in dynamicValidateForm.domains" :key="index">// prop字符串，必须是循环的key值(例如 domains)+index+要校验的值（例如：msg）。<a-form-model-item :prop="'domains.' + index + '.msg'" :rules="{required: true,message: '' }"><a-input v-model="domain.msg" placeholder="请输入" class="ml-10 mr-10 w-100" /></a-form-model-item><a-form-model-item :prop="'domains.' + index + '.content'" :rules="{required: true,message: '' }"><a-input v-model="domain.content" placeholder="请输入" class="ml-10 mr-10 w-100" /></a-form-model-item></a-col>
</a-form-model>

两层for循环里多个输入框校验

// 数据结构： dynamicValidateForm: {domains:[
//             {domain: [{msg:''},....]},
//             {domain: [{msg:''},....]},
//             {domain: [{msg:''},....]},
//             .....
//           ]},
// model绑定的必须是个对象
<a-form-model:labelCol="{ span: 12 }"ref="dynamicValidateForm"@submit="handleSubmit":model="dynamicValidateForm"
><a-row v-for="(domain, index) in dynamicValidateForm.domains" :key="index"><a-col v-for="(item,index2) in domain.domain" :key="index2">// prop字符串，拼接<a-form-model-item  :prop="'domains.' + index + '.domain.' + index2 + '.msg'" :rules="{required: true,message: ''  }"><a-input v-model="item.msg" placeholder="请输入" class="ml-10 mr-10 w-100" /></a-form-model-item></a-col></a-row>
</a-form-model>

// 如果需求要输入框报红，输入后马上变正常，validate-status可以实现

rules规则

<a-form-model :rules="formRules" :model="dynamicValidateForm"><a-form-model-item v-for="(domain, index) in dynamicValidateForm.domains" :key="index"><a-input v-model="domain.score"  placeholder="请输入" class="ml-10 mr-10 w-100" /></a-form-model-item>
</a-form-model// formRules要和dynamicValidateForm.domains，结构一一对应，才能正常校验
formRules：{// domains是重点，0是变量，score是要校验的对象'domains.0.score': [{ required: true, message: '请输入积分', trigger: 'blur' }],
}