表单多个输入框校验

表单里一层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' }
     ],
}

原文地址：https://blog.csdn.net/Qing_X_C/article/details/142489012

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！