【vue3】for循环多选框勾选必填校验

业务场景:

多选项必选一个,选了的输入框必填

    <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="捆绑终端硬件标识" prop="terminalCodeList">
              <el-checkbox-group
                v-model="form.terminalCodeList"
                style="display: flex; flex-direction: column"
              >
                <el-row
                  :gutter="20"
                  style="margin-top: 20px"
                  v-for="item in terminalList"
                >
                  <el-col :span="24">
                    <el-checkbox :label="item.value" :key="item.value">
                      <el-form-item
                        label-width="80px"
                        :label="item.label"
                        :prop="item.value"
                      >
                        <el-input
                          style="width: 200px"
                          v-model="form[item.value]"
                          :placeholder="`请输入` + item.label"
                        />
                      </el-form-item>
                    </el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
  let terminalList = $ref([
    {
      label: '机顶盒mac',
      value: 'mac',
    },
    {
      label: '机顶盒stbId',
      value: 'stbId',
    },
    {
      label: '电视账号',
      value: 'tVAccount',
    },
    {
      label: '手机号码',
      value: 'mobileNum',
    },
    {
      label: '网关mac',
      value: 'wMac',
    },
    {
      label: '授权码',
      value: 'liscense',
    },
    {
      label: '网关stbId',
      value: 'wStbId',
    },
  ])
  let getMacValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'mac') &&
      value == ''
    ) {
      callback(new Error('请输入机顶盒mac'))
    } else {
      callback()
    }
  }
  let getStbIdValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'stbId') &&
      value == ''
    ) {
      callback(new Error('请输入机顶盒stbId'))
    } else {
      callback()
    }
  }
  let gettVAccountValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'tVAccount') &&
      value == ''
    ) {
      callback(new Error('请输入电视账号'))
    } else {
      callback()
    }
  }
  let getMobileNumValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'mobileNum') &&
      value == ''
    ) {
      callback(new Error('请输入手机号码'))
    } else {
      callback()
    }
  }
  let getwMacValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'wMac') &&
      value == ''
    ) {
      callback(new Error('请输入网关mac'))
    } else {
      callback()
    }
  }
  let getwStbIdValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'wStbId') &&
      value == ''
    ) {
      callback(new Error('请输入网关stbId'))
    } else {
      callback()
    }
  }
  let getLiscenseValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'liscense') &&
      value == ''
    ) {
      callback(new Error('请输入授权码'))
    } else {
      callback()
    }
  }
  let getCodeListValidator = (rule, value, callback) => {
    if (value.length == 0) {
      callback(new Error('至少选择一个捆绑终端硬件标识'))
    } else {
      callback()
    }
  }
 let rules = $ref({
    terminalCodeList: [
      {
        required: true,
        validator: getCodeListValidator,
        trigger: 'blur',
      },
    ],
    vendorCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    serviceCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    mac: [{ validator: getMacValidator, trigger: 'blur' }],
    stbId: [{ validator: getStbIdValidator, trigger: 'blur' }],
    tVAccount: [{ validator: gettVAccountValidator, trigger: 'blur' }],
    mobileNum: [{ validator: getMobileNumValidator, trigger: 'blur' }],
    wMac: [{ validator: getwMacValidator, trigger: 'blur' }],
    wStbId: [{ validator: getwStbIdValidator, trigger: 'blur' }],
    liscense: [{ validator: getLiscenseValidator, trigger: 'blur' }],
    
  })

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

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

相关文章

人工智能--搭建人工神经网络

欢迎来到 Papicatch的博客 文章目录 &#x1f349;引言 &#x1f349;神经元与感知器 &#x1f348;神经元&#xff08;Neuron&#xff09; &#x1f348;感知器 &#x1f349;损失函数与梯度下降算法 &#x1f348;损失函数 &#x1f348;梯度下降算法 &#x1f349;…

1. 基础设计流程(以时钟分频器的设计为例)

1. 准备工作 1. 写有vcs编译命令的run_vcs.csh的shell脚本 2. 装有timescale&#xff0c;设计文件以及仿真文件的flish.f&#xff08;filelist文件&#xff0c;用于VCS直接读取&#xff09; vcs -R -full64 -fsdb -f flist.f -l test.log 2. 写代码&#xff08;重点了解代码…

【Kafka】Kafka Broker工作流程、节点服役与退役、副本、文件存储、高效读写数据-08

【Kafka】Kafka Broker工作流程、节点服役与退役、副本、文件存储、高效读写数据 1. Kafka Broker 工作流程1.1 Zookeeper 存储的 Kafka 信息1.2 Kafka Broker总体工作流程1.2.1 Controller介绍 1.3 Broker 重要参数 2. 节点服役与退役3. Kafka副本 1. Kafka Broker 工作流程 …

找不到d3dx9_43.dll无法继续执行代码的几种解决方法

在工作或生活使用电脑都会遇到丢失dll文件应用无法启动的情况&#xff0c;比如你安装完一款你最喜欢的游戏在启动的时候提示系统缺少d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll、xinput1_3.dll 文件而无法正常游戏&#xff0c;或你在工作的时候安装…

每日练题(py,c,cpp).6_19,6_20

检验素数 from math import sqrt a int(input("请输入一个数&#xff1a;")) for i in range(2,int(sqrt(a))):if a%i 0:print("该数不是素数")breakelse: print("该数是素数")# # 1既不是素数也不是合数 # #可以用flag做标志位 # b int(…

思聪私生女能继位吗?王健林表态,家族不会亏待

黄一鸣坚称&#xff1a;这绝对是王思聪的骨肉&#xff01;常言道&#xff0c;常在河边走&#xff0c;哪能不湿鞋。换女友如换装的王思聪&#xff0c;这次终于跌入了陷阱&#xff01;他的网红女友们如繁星点点&#xff0c;但选择标准始终如一——年轻、美丽。在金钱上&#xff0…

CARIS HIPS and SIPSv12 是专业的多波束水深数据和声呐图像处理软件

CARIS HIPS and SIPS是专业的多波束水深数据和声呐图像处理软件。CARIS HIPS and SIPS适用于海洋应用需求。其可靠性和可用性对多波束水深数据处理和声呐图像都是很重要的。CARIS HIPS用于处理多波束水深数据&#xff0c;CARIS SIPS用于处理侧扫声呐图像和多波束背向散射回波数…

Ascend C Add算子样例代码详解

核函数定义 核函数&#xff08;Kernel Function&#xff09;是Ascend C算子设备侧实现的入口。在核函数中&#xff0c;需要为在一个核上执行的代码规定要进行的数据访问和计算操作&#xff0c;当核函数被调用时&#xff0c;多个核都执行相同的核函数代码&#xff0c;具有相同的…

stable diffusion 模型融合

【抛砖引玉】GhostMixV2.0的制作过程及关于Checkpoint模型融合的一点经验 - 知乎大家好,我是Ghost_Shell,也是GhostMix的作者。本来想写一篇文章整体介绍一下模型,一些你们可能没察觉到,但我非常固执的理念,也算是模型的特性。结果发现写太长了,就分开两部分,第一部分是…

技术驱动会展:展位导航系统的架构与实现

随着会展行业的快速发展&#xff0c;大型会展中心面临着如何提升参展者体验、提高招商效率的挑战。针对客户反馈的展馆面积大、展位查找困难等问题&#xff0c;维小帮提出一套智慧会展导航解决方案&#xff0c;旨在通过先进的室内导航技术提升会展中心的运营效率和参展者的满意…

后端实现预览pdf,mp4,图片

PDF预览 /*** pdf预览* param response*/RequestMapping(value "/preview")public void showPdf(HttpServletResponse response) {try {//String filePath this.getClass().getClassLoader().getResource("../../static/pdf/readme.pdf").getPath();Stri…

cad批量打印pdf怎么弄?介绍三种打印方法

cad批量打印pdf怎么弄&#xff1f;在CAD设计领域&#xff0c;批量打印PDF文件是一项常见且至关重要的任务。面对大量的CAD图纸&#xff0c;如何高效地进行转换和打印&#xff0c;成为了设计师们亟待解决的问题。今天&#xff0c;我们就来推荐三款能够批量打印PDF的CAD软件&…

2024年6月15日 (周六) 叶子游戏新闻

期刊杂志: 聚合读者、意林、知音、故事会、花火以及国内各大知名报纸电子版&#xff0c;无需付费即可观看各种免费资源 中医自学宝典: 集合了中医医案&#xff0c;医经&#xff0c;方剂 药材知识的app&#xff0c;更方便的免费学习中医知识 《赛博朋克2077》被取消DLC泄露&…

基于语音识别的智能电子病历(五)电子病历编辑器

前言 首先我们要明确一个概念&#xff1a;很多电子病历的编辑器&#xff0c;在输入文字的地方&#xff0c;有个麦克风按钮&#xff0c;点击一下&#xff0c;可以进行录音&#xff0c;然后识别的文字会自动输入到电子病历中&#xff0c;这种方式其实不能称为“基于语音识别的智…

WPF/C#:数据绑定到方法

在WPF Samples中有一个关于数据绑定到方法的Demo&#xff0c;该Demo结构如下&#xff1a; 运行效果如下所示&#xff1a; 来看看是如何实现的。 先来看下MainWindow.xaml中的内容&#xff1a; <Window.Resources><ObjectDataProvider ObjectType"{x:Type local…

湖南科技大学24计算机考研情况,软工学硕考数二,分数线290分,录取均分321分!

湖南科技大学&#xff08;Hunan University of Science and Technology&#xff09;坐落在伟人故里、人文圣地湘潭&#xff0c;处于长株潭核心区域&#xff0c;比邻湘潭九华经济技术开发区&#xff08;国家级&#xff09;&#xff0c;是应急管理部、国家国防科技工业局与湖南省…

全面国产化之路-信创

概叙 信创&#xff0c;即信息技术应用创新产业&#xff0c;这个词儿最早来源于“信创工委会”&#xff08;全称是信息技术应用创新工作委员会&#xff09;&#xff0c;是在2016年由24家专业从事软硬件关键技术研究及应用的国内单位共同发起成立的一个非营利性社会组织。后…

vulnhub靶场之FunBox-11

一.环境搭建 1.靶场描述 As always, its a very easy box for beginners. Add to your /etc/hosts: funbox11 This works better with VirtualBox rather than VMware. 2.靶场下载 https://www.vulnhub.com/entry/funbox-scriptkiddie,725/ 3.靶场启动 二.信息收集 1.寻找靶…

Python文件与面向对象知识点

目录 文件的基本概念 文件的读取 文件的追加 文件的写入 with语句 知识总结 面向对象的基本概念 类和实例 对象的属性和方法 类属性与方法 面向对象的三大特性 知识总结 文件的基本概念 文件的读取 文件的追加 文件的写入 with语句 知识总结 面向对象的基本概念 …

vue项目build 打包之后如何本地访问

vue项目build 打包之后如何本地访问 注意&#xff1a;vue项目build打包后 如果想实现本地访问 不能直接打开访问dist文件中的HTML文件&#xff08;因为页面带会报错打不开。&#xff09;&#xff0c;需要启一个服务&#xff0c;通过服务来访问&#xff1a; 具体操作过程如下&am…