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

news2024/10/6 6:03:47

比如以下内容:

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

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

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

相关文章

使用Vue-cli脚手架创建uni-app项目(Vue2版本)

文章目录 前言准备工作接下来创建我们的 uni-app 项目 前言 uni-app官方说除了HBuilderX可视化界面&#xff0c;也可以使用 cli 脚手架&#xff0c;可以通过 vue-cli 创建 uni-app 项目。 uni-app官网文档 准备工作 需要安装 node.js 与 vue-cli 脚手架 我是用的版本如下 no…

智芯开发板(Z20K11x)介绍

一、智芯简介 智芯半导体(Zhixin Semiconductor)成立于2019年8月8日&#xff0c;在天津、合肥、苏州、南京、上海等地均 已设立分支机构&#xff1b;提供高可靠性的汽车电子芯片&#xff0c;广泛用于包括汽车车身电子 控制、新能源汽车控制、动力系统、汽车自动驾驶监控芯片等…

嵌入式学习——数据结构(队列、二叉树)——day49

1. 队列 1.1 定义 是一种线性数据结构类型&#xff0c;可以用数组或链表等基础数据结构来实现。它遵循先进先出&#xff08;FIFO&#xff0c;First In First Out&#xff09;的原则。这意味着最先进入队列的元素会最先被移出。 1.2 基本概念 队列&#xff08;Queue&#xff…

微机原理与接口技术:重点内容|计算机系统|学习笔记

系列目录 前言 只将最重要的知识点考点列出来方便学习复习 目录 系列目录前言第1章 微型计算机概述第2章 16位和32位微处理机&#x1f31f;16位微处理器 8086 第3章 Pentium 的指令系统常用指令 第4章 存储器、存储管理和高速缓存技术第5章 微型计算机和外设的数据传输第6章 串…

ollama大模型qwen2:7b性能测试

部署環境信息&#xff1a; (base) rootalg-dev17:/opt# lscpu Architecture: x86_64CPU op-mode(s): 32-bit, 64-bitAddress sizes: 45 bits physical, 48 bits virtualByte Order: Little Endian CPU(s): 8On-line CP…

Application Studio 学习笔记(3)

一、工具栏按钮 1、panel控件添加工具栏按钮 展开panel控件的Advanced属性并点击Action Data&#xff0c;进入Action Data编辑界面 新增Action Data数据&#xff0c;Sequence设定工具按钮的显示顺序 默认工具按钮会显示在弹出工具栏中 勾选Add to Primary ToolBar后&#xff…

电容式单按键触摸检测及接近感应控制芯片 SD8233LQG

SD8233LQG是一款电容式单按键触摸检测及接近感应控制芯片。采用 CMOS 工艺制造&#xff0c;内建稳压和去抖动电路&#xff0c;高可靠性&#xff0c;专为取代传统按键开关而设计。超低功耗与宽工作电压特性&#xff0c;广泛应用于 TWS及 DC 应用的触摸产品中&#xff0c;实现产品…

vue3 中的根据某些特定的文字来筛选数组数据

现在有一批这样的数据 这样的数据 我想根据 hallName 来筛选数据 比如关键字有 我不需要 带有下面字符换的数组数据 const importantData ref(["VIP", "CINITY", "杜比", "IMAX", "4DX", vip, Vip]) 使用some 方法 arr…

笔记-python爬虫概述

目录 常用第三方库 爬虫框架 动态页面渲染1. url请求分析2. selenium3. phantomjs4. splash5. spynner 爬虫防屏蔽策略1. 修改User-Agent2. 禁止cookies3. 设置请求时间间隔4. 代理IP池5. 使用Selenium6. 破解验证码常用第三方库 对于爬虫初学者&#xff0c;建议在了解爬虫原…

FFmpeg中位操作相关的源码:GetBitContext结构体,init_get_bits函数、get_bits1函数和get_bits函数分析

一、引言 由《音视频入门基础&#xff1a;H.264专题&#xff08;3&#xff09;——EBSP, RBSP和SODB》可以知道&#xff0c;H.264 码流中的操作单位是位(bit)&#xff0c;而不是字节。因为视频的传输和存贮是十分在乎体积的&#xff0c;对于每一个比特&#xff08;bit&#xf…

CentOS安装Docker教程(包含踩坑的经验)

目录 一.基础安装 ▐ 安装Docker 二.启动Docker服务 三.配置Docker镜像加速 一.基础安装 在安装Docker之前可能需要先做以下准备 首先如果系统中已经存在旧的Docker&#xff0c;则先卸载&#xff1a; yum remove docker \docker-client \docker-client-latest \docker-…

Modbus转Profibus网关在汽车行业的应用

一、前言 在当前汽车工业的快速发展中&#xff0c;汽车制造商正通过自动化技术实现生产的自动化&#xff0c;目的是提高生产效率和减少成本。Modbus转Profibus网关&#xff08;XD-MDPB100&#xff09;应用于汽车行业&#xff0c;主要体现在提升自动化水平、优化数据传输以及实…

Java8新特性stream的原理和使用

这是一种流式惰性计算&#xff0c;整体过程是&#xff1a; stream的使用也异常方便&#xff0c;可以对比如List、Set之类的对象进行流式计算&#xff0c;挑出最终想要的结果&#xff1a; List<Timestamp> laterTimes allRecords.stream().map(Record::getTime).filter…

第11章 规划过程组(收集需求)

第11章 规划过程组&#xff08;一&#xff09;11.3收集需求&#xff0c;在第三版教材第375~378页&#xff1b; 文字图片音频方式 第一个知识点&#xff1a;工具与技术 1、决策 投票 用于生成、归类和排序产品需求 独裁型决策制定 一个人负责为整个集体制定决策 多标准决策分析…

软件需求管理规程(DOC原件)

软件需求管理规程是确保软件开发过程中需求清晰、一致、可追踪的关键环节&#xff1a; 明确需求&#xff1a;项目初期&#xff0c;与利益相关者明确项目目标和需求&#xff0c;确保需求完整、无歧义。需求评审&#xff1a;组织专家团队对需求进行评审&#xff0c;识别潜在风险和…

DM达梦数据库存储过程

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

Arduino - OLED

Arduino - OLED Arduino - OLED Arduino通过u8g2库驱动OLEDU8g2 驱动oled自定义中文字库 The OLED (Organic Light-Emitting Diode) display is an alternative for LCD display. The OLED is super-light, almost paper-thin, flexible, and produce a brighter and crisper…

【乐吾乐2D可视化组态编辑器】图形库、组件库

15 图形库 15.1 图纸 新建文件夹、新建图纸、删除文件夹、删除图纸 15.2 系统组件 乐吾乐图形库一共分为三大类&#xff1a;基础图形库、电力图形库、物联网图形库、2.5D图形库&#xff0c;总共约4000个图元&#xff0c;能满足大部分行业的基本需求。 格式有三种&#xff1a…

智慧法务引领:构筑数字化法治核心,塑造未来企业竞争力

在全球化及信息化时代背景下&#xff0c;企业面临的法律环境越来越复杂&#xff0c;法治数字化成为企业维护合法权益、提升市场竞争力的必然选择。智慧法务管理系统作为推动企业法治数字化转型的重要工具&#xff0c;不仅提高了法律服务效率&#xff0c;而且加强了企业的法律风…

百问网全志D1h开发板投屏功能实现

投屏功能实现 D1系列号称点屏神器&#xff0c;不仅能点屏&#xff0c;还能用于投屏。 源码准备 百问网为 【百问网D1h开发板】提供了投屏功能需要使用的源码&#xff0c;直接git下载即可&#xff1a; git clone https://github.com/DongshanPI/DongshannezhaSTU_DLNA_Scree…