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;是成本估算、采…

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

文章链接: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;} };

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

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

KUKA机器人不同运行方式

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

阿里云再次突发故障,高可用形同虚设?

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

【UE 网络】多人游戏开发时应该如何区分客户端逻辑和服务端逻辑 入门篇

目录 0 引言1 服务器和客户端逻辑1.1 服务器职责1.2 客户端职责 2 函数会在客户端执行还是服务端&#xff1f;2.1 只在客户端执行的函数RepNotifyClient RPCMulticast RPC 2.2 只在服务端执行的函数GameModeServer RPC 2.3 在两端都可以执行的函数GetNetMode() 和 HasAuthority…

用C#的MediaDevices程序集打开MTP设备(用usb线连接的手机)的文件夹

一、任务描述 1、可以访问MTP设备的桌面程序。 MTP设备&#xff1a;支持媒体传输协议(MTP)的设备&#xff0c;MTP简单来说就是一种PC与其他设备相连的一种协议&#xff0c;智能手机、平板电脑、数码相机等可以通过 USB 连接到电脑&#xff0c;并通过 MTP 协议传输媒体文件。点…

PLC_博图系列☞F_TRIG:检测信号下降沿

PLC_博图系列☞F_TRIG&#xff1a;检测信号下降沿 文章目录 PLC_博图系列☞F_TRIG&#xff1a;检测信号下降沿背景介绍F_TRIG&#xff1a; 检测信号下降沿说明参数示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 F_TRIG 背景介绍 这是一篇关于PLC编程的文章&a…

Swift中的二分查找:全面指南

Swift中的二分查找&#xff1a;全面指南 简介 二分查找是计算机科学中的经典算法&#xff0c;被广泛用于在已排序的数组中高效地搜索目标值。与线性查找逐个检查每个元素不同&#xff0c;二分查找不断将搜索区间减半&#xff0c;因此在处理大数据集时要快得多。 在这篇博客中…

从零到百万用户的扩展之路

写在前面: 此博客内容已经同步到我的博客网站,如需要获得更优的阅读体验请前往https://mainjaylai.github.io/Blog/blog/system/design-system 设计一个支持数百万用户的系统是极具挑战性的,它是一段需要持续优化和不断改进的旅程。在这篇博客中,我们将构建一个支持单个用…

NC13611 树(dfs序+区间dp)

链接 思路&#xff1a; 容易知道对于同一种颜色的子图一定是仅由该颜色的点连通的。设我们要划分的个数为x&#xff08;x<k&#xff09;&#xff0c;也就是说我们要选出x-1条边&#xff0c;这里有种情况。那么我们需要选出x种颜色&#xff0c;这里有种情况。然后我们需要将…

双端队列广搜——AcWing 175. 电路维修

双端队列广搜 定义 双端队列广搜&#xff08;Breadth-First Search with a Deque&#xff09;是一种图或树的遍历算法变体&#xff0c;它利用了双端队列&#xff08;Deque&#xff0c;全称Double Ended Queue&#xff0c;允许在其两端进行插入和删除操作&#xff09;作为数据…

1996-2023年各省财政收支数据(无缺失)(地方财政一般预算收入、地方财政一般预算支出)

1996-2023年各省财政收支数据&#xff08;无缺失&#xff09;&#xff08;地方财政一般预算收入、地方财政一般预算支出&#xff09; 1、时间&#xff1a;1996-2023年 2、来源&#xff1a;国家统计局、统计年鉴、 3、指标&#xff1a;地方财政一般预算收入、地方财政一般预算…

跨境业务经验推荐:三大优秀的IP代理服务商

作为一名多年从事跨境业务的老手&#xff0c;今天我要给大家介绍几款绝对靠谱的IP代理服务商&#xff0c;保证让你的全球业务更加顺畅&#xff01; 1. 711Proxy 711Proxy以其优秀的性能和覆盖范围广而著称。对于跨境电商和国际业务来说&#xff0c;快速稳定的网络连接至关重要…