当前位置: 首页 > news >正文

表单多个输入框校验

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

// 数据结构:dynamicValidateForm:{domains: [{msg:'',content:''},....]}
// model绑定的必须是个对象
<a-form-model
   :labelCol="{ span: 12 }"
    ref="dynamicValidateForm"
    @submit="handleSubmit"
    :model="dynamicValidateForm"
>
  <a-form-model-item 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-form-model-item>
</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-form-model-item 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-form-model-item>
</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' }
     ],
}

相关文章:

  • webview2加载本地页面
  • Git常用命令详解
  • 用最新的C++技术,如何实现一个序列化工具库?
  • 提前解锁 Vue 3.5 的新特性
  • 【Java】接口interface【主线学习笔记】
  • 7.搭建个人金融数据库之快速获取股票列表和基本信息!
  • 英特尔®以太网网络适配器E810-CQDA1 / E810-CQDA2 网卡 规格书 e810 网卡 规格书 Intel100G E810 网卡 白皮书
  • 【Redis技能熟练掌握之十年内功】
  • JVM内存区域-堆(Heap)
  • 基于c++实现的简易shell
  • 【PostgreSQL】PostgreSQL数据库允许其他IP连接到数据库(Windows Linux)
  • Tauri 应用 input 输入自动大写问题定位解决
  • 计算机毕业设计 校运会管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • vue3 选择字体的颜色,使用vue3-colorpicker来选择颜色
  • 机械快门,电子快门,电子前帘快门 的原理
  • 9月23日
  • C# Action和delegate区别及示例代码
  • GUI编程之MATLAB入门详解(01)
  • qt-C++笔记之作用等同的宏和关键字
  • Highcharts甘特图基本用法(highcharts-gantt.js)
  • 广东早熟荔枝“抢滩”上海,向长三角消费者喊话:包甜,管够
  • 这个“超强致癌细菌”,宝宝感染率高达40%,预防却很简单
  • 广西壮族自治区党委政法委副书记李文博接受审查调查
  • 何立峰:中方坚定支持多边主义和自由贸易,支持世贸组织在全球经济治理中发挥更大作用
  • 牛市早报|中美经贸高层会谈达成重要共识,取得实质性进展
  • 普京提议恢复直接谈判,泽连斯基:望俄明日停火,乌愿谈判