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-dialog
    v-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-option
            v-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-option
                v-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-option
                v-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必须加引号,否则会因为包含点(.)报错

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络问题排障专题-数据分析

目录 一、各协议数据包介绍 1、Ping、DNS数据包介绍&#xff08;单包一来一回&#xff09; Ping DNS 2、TCP数据包 在正常情况下&#xff0c;TCP连接确实是从三次握手开始的。三次握手是建立TCP连接的过程&#xff0c;它的目的是确保双方都能够正常通信。 为啥要四次挥手…

阿里云常用的操作

阿里云常见的产品和服务 容器服务 可以查看容器日志、监控容器cpu和内存&#xff0c; 日志服务 SLS 可以查看所有服务的日志&#xff0c; Web应用防火墙 WAF 可以查看 QPS. 阿里云查看集群&#xff1a; 点击 “产品和服务” 中的 容器服务&#xff0c;可以查看 集群列表&…

树莓派Pico

树莓派Pico是树莓派基金会推出的一款基于RP2040微控制器的微型计算机板&#xff0c;它是专为需要高性能微控制器的应用场景设计的&#xff0c;特别适合于需要实时控制、低功耗和小型化解决方案的项目。以下是树莓派Pico的详细介绍&#xff1a; ### 核心特点&#xff1a; - **基…

一看就会的Jmeter分布式压测实战技巧详解

一、什么是jmeter分布式压测&#xff1f; jmeter分布式压测&#xff1a;指将需要模拟的大量并发用户数分发到多台压力机&#xff0c;使jmeter拥有更大的负载量&#xff0c;满足真实业务场景&#xff08;高并发场景&#xff09;。可以理解为通过一个Jmeter控制台来远程控制多个…

云计算:重塑数字时代的基石

目录 一、引言 二、云计算的定义与特点 三、云计算的发展历程 四、云计算的应用场景 五、云计算面临的挑战 六、云计算的未来发展趋势 七、结语 一、引言 随着信息技术的飞速发展&#xff0c;云计算已经逐渐渗透到我们生活的方方面面。从个人用户的在线存储、在线办公&…

从零开始:Spring Boot 中使用 Drools 规则引擎的完整指南

规则引擎作用 规则引擎主要用于将业务逻辑从应用程序代码中分离出来&#xff0c;提高系统的灵活性和可维护性。规则引擎通过预定义的规则来处理输入数据并做出相应的决策&#xff0c;从而实现业务逻辑的自动化和动态调整。 例如 门店信息校验&#xff1a;美团点评在门店信息…

遥感数据并行运算(satellite remote sensing data parallell processing)

文章内容仅用于自己知识学习和分享&#xff0c;如有侵权&#xff0c;还请联系并删除 &#xff1a;&#xff09; 之前不太会用&#xff0c;单纯想记录一下&#xff0c;后面或许还会用到 1. 教程 [1] Pleasingly Parallel Programming: link 1.1 处理器&#xff0c;核和线程 …

使用容器部署redis_设置配置文件映射到本地_设置存储数据映射到本地_并开发java应用_连接redis---分布式云原生部署架构搭建011

可以看到java应用的部署过程,首先我们要准备一个java应用,并且我们,用docker,安装一个redis 首先我们去start.spring.io 去生成一个简单的web项目,然后用idea打开 选择以后下载 放在这里,然后我们去安装redis 在公共仓库中找到redis . 可以看到它里面介绍说把数据放到了/dat…

Ansys Zemax|在设计抬头显示器(HUD)时需要使用哪些工具?

附件下载 联系工作人员获取附件 汽车抬头显示器或汽车平视显示器&#xff0c;也被称为HUD&#xff0c;是在汽车中显示数据的透明显示器&#xff0c;不需要用户低头就能看到他们需要的重要资讯。这个名字的由来是由于该技术能够让飞行员在头部“向上”并向前看的情况下查看信息…

第五节:如何使用其他注解方式从IOC中获取bean(自学Spring boot 3.x的第一天)

大家好&#xff0c;我是网创有方&#xff0c;上节我们实践了通过Bean方式声明Bean配置。咱们这节通过Component和ComponentScan方式实现一个同样功能。这节实现的效果是从IOC中加载Bean对象&#xff0c;并且将Bean的属性打印到控制台。 第一步&#xff1a;创建pojo实体类studen…

人工智能AI风口已开:如何赋予UI设计与视频剪辑新生命

随着科技的浪潮不断向前推进&#xff0c;人工智能&#xff08;AI&#xff09;正以惊人的速度重塑着我们的世界&#xff0c;特别是在创意产业的核心领域——UI设计与视频剪辑中&#xff0c;AI正逐步成为驱动行业创新与变革的关键力量。在这个AI技术全面开花的新时代&#xff0c;…

搭建企业内网pypi镜像库,让python在内网也能像互联网一样安装pip库

目录 知识点实验1.服务器安装python2.新建一个目录/mirror/pip&#xff0c;用于存储pypi文件&#xff0c;作为仓库目录3.下载python中的所需包放至仓库文件夹/mirror/pip3.1. 新建requirement.py脚本&#xff08;将清华pypi镜像库文件列表粘贴到requirement.txt文件中&#xff…

Hadoop版本演变、分布式集群搭建

Hadoop版本演变历史 Hadoop发行版非常的多&#xff0c;有华为发行版、Intel发行版、Cloudera Hadoop(CDH)、Hortonworks Hadoop(HDP)&#xff0c;这些发行版都是基于Apache Hadoop衍生出来的。 目前Hadoop经历了三个大的版本。 hadoop1.x&#xff1a;HDFSMapReduce hadoop2.x…

mtu 1500 qdisc noop state DOWN group default qlen 1000问题的解决

问题描述 1、打开虚拟机终端&#xff0c;root身份启动ens网卡&#xff08;一般情况下还是会直接报错 ifup ens33 2、停止网卡设置disable再启动 systemctl stop NetworkManager 不报错即可 systemctl disable NetworkManagerservice network restart出现了绿色的OK啦&#…

流水线作业模拟程序

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 namespace 流水线作业模拟 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private int Count 0;private bool IsStop false;private void uiLight1_Click(object sender, EventArgs e…

某麦网自动刷新抢票脚本——手机端(高级版)

某麦网自动刷新抢票脚本——电脑端 小白操作-抵制黄牛–需要更好用更高级关注获取 如何用Python自动抢大麦网演出票&#xff1f; 在数字化时代&#xff0c;购票已经成为我们生活的一部分&#xff0c;无论是音乐会、话剧、体育赛事还是各种展览&#xff0c;抢票几乎成了一项“…

[每周一更]-(第103期):GIT初始化子模块

文章目录 初始化和更新所有子模块分步骤操作1. 克隆包含子模块的仓库2. 初始化子模块3. 更新子模块 查看子模块状态提交子模块的更改处理子模块路径错误的问题 该问题的缘由是因为&#xff1a;在写某些代码的时候&#xff0c;仓库中有些文件夹&#xff0c;只提交了文件夹名称到…

C# SocketUDP服务器,组播

SocketUDP 自己即是服务器又是客户端 &#xff0c;在发消息只需要改成对方ip和端口号即可 前提对方必须开启服务器 socket.Bind(new IPEndPoint(IPAddress.Parse("192.168.107.72"), 8080)); 控件&#xff1a;Button,TextBox,RichTextBox 打开自己服务器 public…

六、资产安全—信息分级资产管理与隐私保护(CISSP)

目录 1.信息分级 2.信息分级方法 3.责任的层级 4.资产管理 5.隐私数据管理角色 6.数据安全控制 7.数据保护方案 8.使用安全基线 六、资产安全—数据管理(CISSP): 五、身份与访问管理—身份管理和访问控制管理(CISSP): 1.信息分级 信息分级举列: 2.信息分级方…

Halcon 文本文件操作,形态学

一文件的读写 *******************************************************向文本文件写入字符串内容*************************************************************read_image (Image, fabrik)threshold (Image, Region, 0, 120)area_center (Region, Area, Row, Column)open_…