el-form动态嵌套表单验证

news2024/11/22 6:31:14

v-for 遍历的表单校验

根据官网的介绍,是在 el-form-item 中使用 :rules 属性,同时 prop 属性直接定位到具体循环元素。这个用法的前提是在循环外面包裹一个 el-form 元素,v-for 位于 el-form-item 中。

<template>
  <el-form
    :model="dynamicValidateForm"
    ref="dynamicValidateForm"
    label-width="100px"
    class="demo-dynamic"
  >
    <el-form-item
      prop="email"
      label="邮箱"
      :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="dynamicValidateForm.email"></el-input>
    </el-form-item>

    <template v-for="(domain, index) in dynamicValidateForm.domains">
      <el-form-item
        :label="domain.name + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
          required: true,
          message: domain.name + '不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(items, indexs) in domain.children"
        :key="items.key"
        :label="items.name + indexs"
        :prop="'domains.' + index + '.children.' + indexs + '.value'"
        :rules="{
          required: true,
          message: items.name + '不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')"
        >提交</el-button
      >
      <el-button @click="addDomain">新增域名</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [
          { name: '姓名', value: "", key: 1 },
          { name: '家庭', value: "", key: 2, children: [{ name: '爸爸', value: "", key: 11 }, { name: '妈妈', value: "", key: 22 }] },
        ]

      }
    }
  },
  methods: {
    addDomain () {

    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  mounted () {

  }
}
</script>

<style>
</style>

位于循环中的 el-form-item ,为 el-form-item 设置 :rules 属性,同时设置它的 prop 属性需要遵循的规则为:

   prop=循环对象.下标.子属性

运行效果:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/713860.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入浅出对话系统——对话管理与对话生成

引言 对话管理 我们知道对话管理主要包括状态追踪(DST)和策略优化(DPO)。 对话管理模块包含两个子任务&#xff1a; 对话状态追踪(Dialogue State Tracking) 根据用户输入和对话历史识别对话状态&#xff1b;策略学习(Policy Learning) 根据识别到的对话状态选择合适的下一步…

BC SU21 对象 ZJHD_LGO 已交付;只能进行有限更改

ECC 升级S4 库位从ECC的唯一库位 → S4 工厂 库位才能唯一。 那原先的 依据库存地 控制库位的zjhd打印机的权限需要新增工厂字段。 但是su21的修改的时候 提示 &#xff1a;对象 ZJHD_LGO 已交付&#xff1b;只能进行有限更改 查了一下&#xff0c;SAP官方说只能 把该权限…

HCIP第二次作业

要求&#xff1a;R1-R2-R3-R4-R5 RIP 100运行版本2 R6-R7 RIP 200 运行版本1 1.使用合理IP地址规划网络&#xff0c;各自创建环回接口 2.R1创建环回 172.16.1.1/24 172.16.2.1/24 172.16.3.1/24 3.要求R3使用R2访问R1环回 4.减少路由条目数量&#xff0c;R1-R2之间增加路由传递…

部署springboot项目读取外部配置文件

我们在部署springboot项目的时候&#xff0c;经常会遇到这样的情况&#xff1a;测试环境与生产环境的配置不一样&#xff0c;这就导致每次部署的时候都要修改配置文件再打包&#xff0c;即使用了nacos进行配置管理&#xff0c;但测试环境与生产环境的nacos部署的地方肯定不一样…

MyBatis简单入门

文章目录 快速入Mapper代理开发具体步骤使用mapper代理中的包扫描 查询字段名称不一致问题方法一&#xff1a;对SQL语句起别名方法二&#xff1a; 采用resultMap映射 条件查询单条件查询SQL中特殊字符的处理 多条件查询方式一&#xff1a;散装参数方式二&#xff1a;对象参数方…

ABAP:ABAP解析xml文件的方法

目前我在ECC的系统找到两种实现XML解析的办法&#xff0c;第一种是通过strans创建转化例程&#xff0c;然后在程序中调用转化例程来转化xml&#xff0c;第二种是调用方法按照node解析xml。 要转化的xml文件demo如下 <?xml version"1.0" encoding"Windows-…

1.5 编写自定位ShellCode弹窗

在笔者上一篇文章中简单的介绍了如何运用汇编语言编写一段弹窗代码&#xff0c;虽然简易ShellCode可以被正常执行&#xff0c;但却存在很多问题&#xff0c;由于采用了硬编址的方式来调用相应API函数的&#xff0c;那么就会存在一个很大的缺陷&#xff0c;如果操作系统的版本不…

提取图像中的文本信息(Tesseract OCR 和 pytesseract)

环境准备 安装Tesseract&#xff1a;点这里参考本人博客 下载第三方库 pip install Pytesseract这个库只自带了一个英语的语言包&#xff0c;这个时候如果我们图片中有对中文或者其他语言的识别需求&#xff0c;就需要去下载其他语言包 下载其他语言包 进入官网以后进入Tra…

MyBatisPlus基础知识

一、MyBatisPlus 1.MyBatisPlus入门案例与简介 这一节我们来学习下MyBatisPlus的入门案例与简介&#xff0c;这个和其他课程都不太一样&#xff0c;其他的课程都是先介绍概念&#xff0c;然后再写入门案例。而对于MyBatisPlus的学习&#xff0c;我们将顺序做了调整&#xff0…

STM32——MCU简单介绍

文章目录 一、单片机基础简介1.MCU简介&#xff08;1&#xff09;MCU的组成&#xff08;2&#xff09;常见的MCU 2.STM32简介&#xff08;1&#xff09;STM32&STM8产品型号--各个字母的含义 3.如何查手册&#xff08;1&#xff09;数据手册芯片信息总线框图时钟树内存映射 …

Java面试题及答案整理( 金九银十最新版,持续更新)

最近可能有点闲的慌&#xff0c;没事就去找面试面经&#xff0c;整理了一波面试题。我大概是分成了 Java 基础、中级、高级&#xff0c;分布式&#xff0c;Spring 架构&#xff0c;多线程&#xff0c;网络&#xff0c;MySQL&#xff0c;Redis 缓存&#xff0c;JVM 相关&#xf…

【vue】使用uni-indexed-list组件点击获取下标详情

问题描述 使用uniapp自带的uni-indexed-list组件&#xff0c;点击索引只能获取到点击的名称&#xff0c;不能获取其他信息 解决方案&#xff1a; uni-indexed-list组件1.2.1版本 对uni-indexed-list组件代码进行修改,示例如下: 找到setList函数&#xff0c;对内部逻辑赋值就…

二叉树 — 多叉转二叉树

题目&#xff1a; 将一棵多叉树&#xff0c;转换成二叉树&#xff0c;在通过这个二叉树还原成多叉树。 分析 毫无疑问&#xff0c;多叉树的头结点也是转换的二叉树的头结点。 多叉树如下图所示&#xff1a; 转换成二叉树&#xff0c;则将多叉树所有的节点X&#xff0c;将X的孩…

MATLAB导入EXCEL表格数据画散点图

namexxxx.xlsx;%这里的xxxx是EXCEL文件的名字&#xff0c;而且需要将它和.m文件放在同一个文件夹下 axlsread(name,D2:D25); aa; bxlsread(name,I2:I25); bb; x[a,b]; cxlsread(name,E2:E25); cc; dxlsread(name,J2:J25); dd; y[c,d]; plot(x,y,b-o),grid on;%b-o是颜色和图案&…

linux 内核接口atomic_long_try_cmpxchg_acquire/release详解

linux 内核接口atomic_long_try_cmpxchg_acquire详解 1 atomic_long_try_cmpxchg_acquire/release1.1 atomic_long_try_cmpxchg_acquire1.2 atomic_long_try_cmpxchg_release 2 arch_atomic64_cmpxchg_acquire/release2.1 arch_atomic64_cmpxchg_acquire/release定义2.2 atomic…

移远通信携手中国电信等伙伴重磅发布5G NTN试验成果,共促卫星物联网产业发展

6月29日&#xff0c;在MWC上海展期间&#xff0c;以“5G云网新科技 数字经济新动能”为主题的2023中国电信5G/6G科技创新成果发布会顺利举行。 会上&#xff0c;中国电信联合合作伙伴重磅发布了多项科技创新成果和科技创新应用&#xff0c;作为中国电信在卫星物联网领域重要的合…

ArcGIS SDE空间数据库 镶嵌数据集白边压盖及不显示问题

首先&#xff0c;在Oracle SDE空间数据库中新建了镶嵌数据集(Mosaic Dataset) &#xff0c;这里通过程序导入影像数据以后出现了 影像不显示&#xff08;得放到很小比例尺才显示&#xff09;及影像之间互相压盖 第一&#xff0c;解决影像互相压盖问题 在Calalog中右键镶嵌数据…

操作系统6——文件管理

本系列博客重点在深圳大学操作系统课程的核心内容梳理&#xff0c;参考书目《计算机操作系统》&#xff08;有问题欢迎在评论区讨论指出&#xff0c;或直接私信联系我&#xff09;。 梗概 本篇博客主要介绍操作系统第七章文件管理和第八章磁盘储存器的管理的相关知识。 目录 …

智谱AI-算法实习生(知识图谱方向)实习面试记录

岗位描述 没错和我的经历可以说是match得不能再match了&#xff0c;但是还是挂了hh。 面试内容 给我面试的是唐杰老师的博士生&#xff0c;方向是社交网络数据挖掘&#xff0c;知识图谱。不cue名了&#xff0c;态度很友好的 &#xff0c;很赞。 date&#xff1a;6.28 Q1 自…

【算法之双指针I】leetcode344.反转字符串

344.反转字符串 力扣题目链接 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 输入&#xff1a;s ["h…