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

Vue - Element el-form 表单对象多层嵌套校验

针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别,
具体是下面两部分:

数据源:

fromData: {name: '',health: {height: ''}
}

1、 给 el-form-itemprop设为:prop="health.height"
v-model 设为: v-model="fromData.health.height"

  <el-form-item label="身高" prop="health.height"><el-input v-model="fromData.health.height" clearable /></el-form-item>

2、校验规则rules对象对应的key设置为数据源内部的值: 'health.height'

rules: {'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]
}

具体代码

<template><div><el-form ref="fromRef" :model="fromData" :rules="rules"><el-form-item label="姓名" prop="name"><el-input v-model="fromData.name" clearable /></el-form-item><el-form-item label="身高" prop="health.height"><el-input v-model="fromData.health.height" clearable /></el-form-item></el-form><el-button @click="onSubmit()">提交</el-button></div>
</template><script>
export default {data() {return {fromData: {name: '',health: {height: ''}},rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]}}},methods: {onSubmit() {this.$refs['fromRef'].validate((valid) => {if (valid) {console.log('校验通过')console.log('fromData', JSON.stringify(this.fromData))}})}}
}
</script><style scoped></style>

相关文章:

Vue - Element el-form 表单对象多层嵌套校验

针对el-form的数据源是对象嵌套对象&#xff0c;在进行数据绑定和校验时和单层的对象有一点区别&#xff0c; 具体是下面两部分&#xff1a; 数据源&#xff1a; fromData: {name: ,health: {height: } }1、 给 el-form-item 的 prop设为&#xff1a;prop"health.height&…...

elementUI全屏loading的使用(白屏的解决方案)

官网中有使用方法&#xff0c;但是我实际上手之后会出现白屏&#xff0c;解决办法如下&#xff1a; <el-button type"text" size"small" click"delRow(scope)"> 删除</el-button>loading: false, // loading 动画loadingInstance…...

flutter开发实战-flutter_spinkit实现多种风格进度指示器

flutter开发实战-flutter_spinkit实现多种风格进度指示器 最近开发过程中flutter_spinkit&#xff0c;这个拥有多种种风格加载指示器 一、flutter_spinkit 引入flutter_spinkit # 多种风格的模糊进度指示器flutter_spinkit: ^5.1.0效果示例 const spinkit SpinKitRotatingC…...

检测文本是否由AI生成,GPT、文心一言等均能被检测

背景 目前很多机构推出了ChatGPT等AI文本检测工具&#xff0c;但是准确率主打一个模棱两可&#xff0c;基本和抛硬币没啥区别。 先说结论&#xff0c;我们对比了常见的几款AI检测工具&#xff0c;copyleaks检测相比较而言最准确。 检测文本 AI文本片段1 来源&#xff1a;G…...

【3D机甲】捏造型功能

文章目录 1. 模型选择2. 变形和调整3. 材质和纹理4. 部件修改5. 关节和动作6. 物理模拟 3D机甲捏造型功能通常包括以下小功能&#xff1a; 模型选择&#xff1a;通过从库中选择机甲模型或导入自定义模型来开始设计。 变形和调整&#xff1a;调整机甲的大小、比例、旋转和位置&…...

设计模式之五:单例模式

有些对象只需要有一个&#xff0c;比如线程池、缓存和注册表等。 对比全局变量&#xff0c;其需要在程序开始就创建好对象&#xff0c;如果这个对象比较耗资源&#xff0c;而在后面的执行过程中又一直没有用到&#xff0c;就造成了浪费。 class Singleton {private:static Si…...

MATLAB的设置路径

在主页下的 或者在命令行输入path&#xff0c;命令行会出现所有路径 必须要将某些函数.m文件以及一些类文件包含在路径当中&#xff0c;否则在脚本代码中输入代码时&#xff0c;不会有代码提示...

Hyperledger Fabric 使用 CouchDB 和复杂智能合约开发

前言 在上个实验中&#xff0c;我们已经实现了简单智能合约实现及客户端开发&#xff0c;但该实验中智能合约只有基础的增删改查功能&#xff0c;且其中的数据管理功能与传统 MySQL 比相差甚远。本文将在前面实验的基础上&#xff0c;将 Hyperledger Fabric 的默认数据库支持 …...

这应该是最全的,Fiddler手机App抓包详解,看完还不会来找我...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 什么是抓包&#…...

使用ubuntu-base制作根文件系统

1&#xff1a;ubuntu官网下载最小根文件系统&#xff1a; 放置到电脑的ubuntu中&#xff0c; Mkdir Ubuntu_rootfs Cd Ubuntu_rootfs Sudo tar –zxvf Ubuntu-bash-xxxxxx.tar.gz 2&#xff1a;电脑的ubuntu安装qemu搭建arm模拟系统 将/usr/bin/qemu-arm-static/(64位拷贝…...

springboot-mybatis的分页查询的接口

一、安装依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version> </dependency> 二、代码定义 分页对象类 Data AllArgsConstruct…...

网络音频终端音频编码解码终端

网络对讲终端SV-7011V 网络对讲终端SV-7011V&#xff0c;采用了ARM音频DSP架构&#xff0c;集网络对讲、网络广播、监听等功能于一身&#xff0c;内置麦克风、配置line out、line in、Mic in功能输出接口&#xff0c;适用于学校&#xff0c;机场&#xff0c;广场等场所。 产品…...

cordova 12 编译失败Could not find method compile() for arguments [com....]

问题&#xff1a; Could not find method compile() for arguments [com.tencent.mm.opensdk:wechat-sdk-android-with-mta:] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. 问题原因&#xff1a; 在Cordova项目中&…...

快速开发平台 WebBuilder 9 发布

WebBuilder 是一款强大&#xff0c;全面和高效的应用开发和运行平台。基于浏览器的集成开发环境&#xff0c;智能化的设计&#xff0c;能轻松完成常规桌面应用和面向手机等的移动应用开发。高效、稳定和可扩展的特点&#xff0c;适合复杂企业级应用的运行。跨平台、数据库和浏览…...

GPT-5出世,需5万张H100!英伟达GPU陷短缺风暴

随着人工智能技术的不断突破&#xff0c;自然语言处理领域也掀起了一波又一波的革命。从GPT-3.5的惊艳登场&#xff0c;到紧随其后的GPT-4的惊世震人&#xff0c;人们仿佛置身于科幻电影中&#xff0c;亲历了一场场技术的奇迹。然而&#xff0c;这场奇迹背后却逐渐显现出一道不…...

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑 现在想对一个接口做性能测试&#xff0c;需要测试它多个线程并发下的调用 1.新建测试计划和线程组 略 2.新建http接口 一个完整的http接口包含请求头和请求&#xff0c;这里就需要两个组件&#xff1a;HTTP request、HT…...

SQL注入总结

0x00 前言 简单的总结一下SQL注入的内容 0x01 常规注入 通过特殊字符测试闭合&#xff0c;通常使用的闭合方式有 " ) ")等 1.判断字段 a union select 1,2,3 #2.执行基础内容 a union select 1,database(),3 #3.查表 a union select 1,group_concat(table_na…...

Java 实现 后端分页

背景说明 在实际开发中&#xff0c;基于数据库表结构进行SQL查询&#xff0c;如果要对结果进行分页&#xff0c;可以借助一些工具类&#xff0c;如&#xff1a;基于Mybatis的 工具类 PageHelper。 但是&#xff0c;有时分页的对象是经过一些业务逻辑处理的列表&#xff0c;如…...

数据结构 | 搜索和排序——排序

目录 一、冒泡排序 二、选择排序 三、插入排序 四、希尔排序 五、归并排序 六、快速排序 排序是指将集合中的元素按照某种顺序排序的过程。 一、冒泡排序 冒泡排序多次遍历列表。它比较相邻的元素&#xff0c;将不合顺序的交换。每一轮遍历都将下一个最大值放到正确的位…...

【嵌入式环境下linux内核及驱动学习笔记-(18)LCD驱动框架1-LCD控制原理】

目录 1、LCD显示系统介绍1.1 LCD显示基本原理1.1.1 颜色的显示原理&#xff1a;1.1.2 图像的构成 1.2 LCD接口介绍1.2.1 驱动接口 - MCU接口1.2.2 驱动接口 - RGB接口1.2.3 驱动接口 - LVDS接口1.2.4 驱动接口 - MIPI接口1.2.5 RGB / MIPI / LVDS三种接口方式的区别&#xff1a…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...