动态增减表单--多个输入框校验

雨化

已于 2024-09-26 15:23:35 修改

阅读量357

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-09-24 14:49:29 首次发布

本文链接：https://blog.csdn.net/Qing_X_C/article/details/142489012

版权

动态增减表单项里一层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' }
     ],
}