vue3中若v-model绑定的响应字段出现三级,该如何实现rules验证规则

比如以下内容:

配置的rules内容

const rules=ref({title:[{required:true,message:"请输入标题",trigger:"blur"},{max:50,message:"最大不能超过256个字",trigger:"blur"}],Category:[{required:true,message:"请选择分类",trigger:"change"}],Province:[{required:true,message:"请选择省份",trigger:"change"}],City:[{required:true,message:"请选择城市",trigger:"change"}],content:[{required:true,message:"请输入内容",trigger:"blur"}]
});

由于分类中v-model绑定的是三级的字段:InformationForm.extraProperties.Category,

这在js中配置的是Category:[{required:true,message:"请选择分类",trigger:"change"}]

导致匹配不上,永远会报请选择分类的提示信息,那该如何做呢?

其实原因在于prop绑定的值要和v-model一致,即:prop=“extraProperties.Category”,

v-model="InformationForm.extraProperties.Category"不变,

最后js中配置的rules需要把验证的字段名配置成prop绑定的值即:extraProperties.Category

如下:

<el-dialogv-model="dialogVisible":title="Title"width="600px":destroy-on-close="true"><el-form :model="InformationForm" ref="formRef" :rules="rules" class="demo-form-inline"><el-form-item label="标题" prop="title"><el-input v-model="InformationForm.title" placeholder="请输入标题" :disabled="readOnly"/></el-form-item><el-form-item label="分类" prop="extraProperties.Category"><el-select v-model="InformationForm.extraProperties.Category" placeholder="请选择分类" :disabled="readOnly"><el-optionv-for="item in categoryOptions":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="地区" prop="extraProperties.Province"><el-row :gutter="20"><el-col :span="12"><el-select v-model="InformationForm.extraProperties.Province" placeholder="请选择省份" :disabled="readOnly" style="width: 240px" @change="provinceChange"><el-optionv-for="item in provinceOptions":key="item.text":label="item.value":value="item.text"/></el-select></el-col><el-col :span="12"><el-select v-model="InformationForm.extraProperties.City" placeholder="请选择市/区" style="width: 240px" :disabled="readOnly" ><el-optionv-for="item in cityOptions":key="item.text":label="item.value":value="item.text"/></el-select></el-col></el-row></el-form-item><el-form-item label="内容" prop="content"><EditorInput v-model="InformationForm.content" :readOnly="readOnly"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submit">确定</el-button></div></template></el-dialog><scripts>
const rules=ref({title:[{required:true,message:"请输入标题",trigger:"blur"},{max:50,message:"最大不能超过256个字",trigger:"blur"}],"extraProperties.Category":[{required:true,message:"请选择分类",trigger:"change"}],"extraProperties.Province":[{required:true,message:"请选择省份",trigger:"change"}],City:[{required:true,message:"请选择城市",trigger:"change"}],content:[{required:true,message:"请输入内容",trigger:"blur"}]
});
</scripts>

注意:js中的extraProperties.Category必须加引号,否则会因为包含点(.)报错

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

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

相关文章

竹云位居首位 |沙利文《2024年全球及中国IAM中间件市场报告》正式发布

7月2日&#xff0c;弗若斯特沙利文&#xff08;Frost & Sullivan&#xff0c;以下简称“沙利文”&#xff09;正式发布《2024年全球及中国IAM中间件市场报告》&#xff08;以下简称“报告”&#xff09;&#xff0c;从行业背景、市场规模、驱动因素、发展趋势等维度阐述当前…

让采购和工程师们既爱又恨的任务——BOM

在项目研发与生产过程中&#xff0c;有一个常常让采购经理和工程师们既爱又恨的任务&#xff0c;那就是整理BBOMB。BOM作为连接设计与制造的桥梁&#xff0c;其重要性不言而喻&#xff0c;它详细列出了产品构成所需的所有零部件、材料及其规格、数量&#xff0c;是成本估算、采…

丘成桐证明的正质猜想使用反证法是错误的

丘成桐在证明“正质量猜想”时也是使用错误的“反证法”&#xff1a; 假定A&#xff0c;推出B&#xff0c;B与C矛盾&#xff0c;得到非A。 但是&#xff0c;这个C也是假设的。 根据反证法推理规则&#xff0c;两个前提与一个结论&#xff0c;必须有两个是真实的并且经过证实的…

ArcGIS Pro SDK (七)编辑 10 捕捉

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 10 捕捉 文章目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 10 捕捉1 配置捕捉 - 打开或关闭捕捉2 配置捕捉 - 应用程序捕捉模式3 配置捕捉 - 图层捕捉可捕捉性4 配置捕捉 - 图层捕捉模式5 配置捕捉 - 组合示例6 捕捉选项…

自然语言处理:第四十一章 解读大模型的参数

文章链接:7B&#xff1f;13B&#xff1f;175B&#xff1f;解读大模型的参数 (qq.com) 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新…

C++ | Leetcode C++题解之第191题位1的个数

题目&#xff1a; 题解&#xff1a; class Solution { public:int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret;} };

“深入解析:YUM仓库、RPM包与源码编译——Linux软件安装方式全面对比“

目录 YUM 仓库安装 概念&#xff1a; 优点&#xff1a; 缺点&#xff1a; RPM 包安装 概念&#xff1a; 优点&#xff1a; 缺点&#xff1a; 源码编译安装 概念&#xff1a; 优点&#xff1a; 缺点&#xff1a; 三者区别 YUM 仓库安装 概念&#xff1a; YUM&…

清新简约卡片风格蓝紫渐变色短视频苹果CMS模板

首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板&#xff0c;一套苹果CMSV10主题。 这套主题是简约风格&#xff0c;以纯洁的白色和深邃的紫色为主色调&#xff0c;为您提供了一种清新、时尚的浏览体验。 在这个简洁而美丽的界面中&#xff0c;您可以轻松畅享各种精彩短…

从0开始学习pyspark--pyspark的数据读取[第4节]

在PySpark中&#xff0c;读取文件型数据是一个常见的操作&#xff0c;Spark支持多种数据格式&#xff0c;如CSV、JSON、Parquet、Avro等。以下是一些常用的方法来读取不同格式的文件数据。 读取文本型数据 读取CSV文件: 使用spark.read.csv方法读取CSV文件&#xff0c;可以通…

LeetCode //Bash - 194. Transpose File

194. Transpose File Given a text file file.txt, transpose its content. You may assume that each row has the same number of columns, and each field is separated by the ’ ’ character. Example: If file.txt has the following content: name age alice 21 r…

高阶面试-spring的部分

spring的诞生 为什么需要spring&#xff1f;spring之前人们是怎么开发的&#xff0c;用的主流框架是什么&#xff0c;spring解决了什么痛点&#xff1f; Enterprise JavaBeans (EJB)&#xff0c;企业级开发框架&#xff0c;里面就提出bean的概念了&#xff0c;为啥不用呢&…

KUKA机器人不同运行方式

KUKA机器人有以下四种运行方式&#xff1a; 1、手动慢速运行&#xff08;T1&#xff09; 2、手动快速运行&#xff08;T2&#xff09; 3、自动运行&#xff08;AUT&#xff09; 4、外部自动运行&#xff08;AUT EXT&#xff09; 将示教器上的钥匙向右旋转&#xff0c;就会…

公路水运安全员B类模拟试题

1.在路基工程中&#xff0c;膨胀土地区开挖时&#xff0c;开挖前要做好( )。 A、推土方案 B、回填土准备工作 C、排水工作 D、边坡加固工作 答案:C 2.《中共中央国务院关于推进安全生产领域改革发展的意见》在“严格安全准入制度”中要求:严格( )领域安全准入条件。 A、高危…

Python面试题-5

81. 如何在Python中实现字符串填充&#xff1f; 在Python中实现字符串填充&#xff0c;可以使用内置的str.ljust(), str.rjust(), 和 str.center() 方法。这些方法允许你分别左对齐、右对齐或居中对齐字符串&#xff0c;并用指定的字符&#xff08;默认为空格&#xff09;填充…

边缘计算节点 BEC 实践:如何快速准备裸金属服务器 Windows 自定义镜像?

很多小伙伴在某些场景下&#xff0c;需要基于 Windows 镜像的裸金属服务器创建自定义镜像&#xff0c;本文将介绍在进行裸金属服务器制作 Windows 自定义镜像前&#xff0c;你需要准备哪些内容、准备的步骤是怎么样的。 在之前我们也发过 快速上手 PC-Farm 服务器的教程&#…

高考假期IT专业预习指南:为梦想启航的IT之旅

随着高考的圆满落幕&#xff0c;许多对未来充满憧憬的考生正站在人生新的十字路口&#xff0c;其中不乏对信息技术&#xff08;IT&#xff09;领域充满好奇与热情的同学们。IT行业作为当今社会最具活力和发展潜力的领域之一&#xff0c;不仅技术日新月异&#xff0c;还提供了广…

对原生textarea加上:当前输入字数/最大输入字数

源码: <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Textarea Character Counter with Dragga…

python中对于函数中参数的详解

函数中参数时候很重要的&#xff0c;不仅仅是我们常用的一些必填参数&#xff0c;可缺省参数&#xff0c;还包括一些&#xff0c;关键字参数等&#xff0c;这边主要是自己一些学习心得~ 1.必填参数 顾名思义必填参数就是调用函数的时候必须传入的参数 def func1(a)&#xff1…

20240701给NanoPi R6C开发板编译友善之臂的Android12系统

20240701给NanoPi R6C开发板编译友善之臂的Android12系统 2024/7/1 14:19 本文采取这个模式编译&#xff1a;11.6.3 编译Android Tablet版本(首次编译) echo "ROCKCHIP_DEVICE_DIR : device/rockchip/rk3588/nanopi6" > .rockchip_device.mk # export INSTALL_GAP…

日志以及日志封装

日志 输出日志信息 import logging# 调用 指定级别 输入日志信息 logging.debug("this is a debug") logging.info("this is a info") logging.warning("this is a warning") logging.error("this is a error") logging.critical(&qu…