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

业务场景:

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

    <el-row :gutter="20"><el-col :span="12"><el-form-item label="捆绑终端硬件标识" prop="terminalCodeList"><el-checkbox-groupv-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-itemlabel-width="80px":label="item.label":prop="item.value"><el-inputstyle="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' }],})

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

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

相关文章

工程施工安全检测嵌入式解决方案

工程施工安全检测嵌入式解决方案 1 范围1.1 引言1.2 系统概述1.3 文档概述 2 工程施工安全检测系统应用场景2.1 作业操作安全检查2.2 受限空间作业安全检测2.3 应急设备操作行为检测2.4 动火作业安全检测 3 工程施工安全检测系统设计方案概述3.1 AI识别系统3.2 AI关键技术介绍3…

【人机交互 复习】第1章 人机交互概述

人机交互的知识点碎&#xff0c;而且都是文字&#xff0c;过一遍脑子里什么都留不下&#xff0c;但是背时间已经来不及了&#xff0c;最好还是找题要题感吧&#xff0c;加深印象才是做对文科的关键 一、概念 1.人机交互&#xff08;Human-Computer Interaction,HCI)&#xff1…

编写水文专业串口通讯软件的开发经历

编写水文专业串口通讯软件的开发经历 一、关于开发 YAC9900 水位雨量 RTU 通讯软件二、软件开发遇到的问题和困难1、开发架构的适应2、开发语言的学习3、.net core 8 架构中串口构建的难点4、YAC9900 水位雨量 RTU 通讯软件开发中的 UI 冻结 三、发现问题解决问题的具体办法1、…

Linux—— ansible循环

1.如果有大量的变量要定义&#xff0c;如果多个变量本身类型相同或类似 再比如&#xff0c;同一个剧本&#xff0c;给主机同时安装多个软件包 按照已有的用法&#xff0c;每个软件包都对应不同变量&#xff0c;还会涉及到改剧本 2.现在可以用清单&#xff0c;以及playbook里…

【路径规划】基于粒子群结合遗传算法实现机器人栅格地图路径规划

研究方法: 基于粒子群优化算法结合遗传算法的机器人栅格地图路径规划是一种智能算法的应用。它将粒子群优化算法和遗传算法相结合,以寻找最优路径规划解决方案。 研究路线: 理论研究:了解粒子群优化算法和遗传算法的基本原理,并掌握相关的路径规划理论知识。 算法设计:…

JavaScript中 Map与reduce的应用

1. Map&#xff1a;映射新世界 Map构造函数创建一个新Map对象&#xff0c;它允许你以键值对的形式存储数据&#xff0c;提供了一种更加灵活的数据结构。与传统的对象相比&#xff0c;Map允许任何值&#xff08;包括对象&#xff09;作为键&#xff0c;而且具有更好的性能表现。…

中服云数字孪生平台

中服云数字孪生平台是基于中服云物联网平台和数据中台打造的一款实时数据2D/3D集成展示监控平台&#xff0c;旨在解决工业物联网数据的直观展示、实虚互动、仿真模拟、故障诊断、告警、预警、预测、实时观测、实时监控等问题。提供了数据采集、数据底座、监控逻辑、建模工具、展…

50ETF期权可以异地线上期权开户吗?

今天带你了解50ETF期权可以异地线上期权开户吗&#xff1f;有很多的股民、基金投资者都是有上证50ETF期权开户的需求的&#xff0c;大家都知道不能把鸡蛋放在一个篮子里&#xff0c;上证50ETF期权可以作为一种对冲大盘下跌的保险。 期权要看你在哪里开户&#xff0c;如果是在券…

React实现H5手势密码

监测应用进入前后台 在JavaScript中&#xff0c;监听H5页面是否在前台或后台运行&#xff0c;主要依赖于Page Visibility API。这个API在大多数现代浏览器中都是支持的&#xff0c;包括苹果的Safari和谷歌的Chrome&#xff08;也就基本覆盖了Android和iOS平台&#xff09;。下…

IOS逆向分析—终极详细(三)

IOS逆向分析—终极详细&#xff08;三&#xff09; 前言一、逆向分析是什么&#xff1f;二、IDA分析1.下载并安装IDA2.安装插件3.加载二进制4.代码分析5.其它 总结 前言 本文是个人完成对IOS上APP分析的整个过程&#xff0c;当然对于不同的机型还会遇到不同的情况&#xff0c;谨…

力扣144A

文章目录 1. 题目链接2. 题目代码3. 题目总结4. 代码分析 1. 题目链接 Arrival of the General 2. 题目代码 #include<iostream> using namespace std;int heightOfSoldier[110];int main(){int numberOfSoldier;cin >> numberOfSoldier;int maxHeight -1;int mi…

QT中启动窗口QSplashScreen的使用

1、前言 一个程序启动时,程序需要初始化操作比如加载数据、连接网络,一般来说比较耗时,这个时候为了用户体验,就是在程序主界面完成之前加一个启动界面。 2、关键代码 #include "SplashScreen.h" #include "ui_SplashScreen.h"SplashScreen::Splash…

【科研基础】通感一体化讲座

高斯信道下通信感知一体化的性能极限(刘凡) 通信和感知在硬件结构上相似,高效地利用资源,实现相互的增益; 感知是基于不同的任务,比如目标检测(检测概率,虚警概率),估计任务(从收到的信号中去估计有用的参数,均方误差,CRB),识别(知道目标的语义信息,就是目标…

助力草莓智能自动化采摘,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建果园种植采摘场景下草莓成熟度智能检测识别系统

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;技术已经渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;再到医疗健康&#xff0c;其影响力无处不在。然而&#xff0c;当我们把目光转向中国的农业领域时&#xff0c;一个令人惊讶的…

Go 内存模型与分配机制

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

前端开发流程与技术选型

目录 一、简介 二、前端职责 三、开发步骤 四、技术选型 五、页面展示 一、简介 做一个网站时&#xff0c;能看到的一切都是前端程序员的工作&#xff0c;负责网页或者app的结构、样式、用户操作网站时的事件逻辑&#xff08;比如点击一个按钮&#xff09;。 二、前端职…

2024广东省职业技能大赛云计算赛项实战——容器云平台搭建

容器云平台搭建 前言 容器镜像使用的是斗学培训平台提供的镜像包&#xff0c;这东西网上都没有&#xff0c;一堆人要&#xff0c;我是靠自己想的方法获取到了&#xff0c;也不敢给。你们可以通过在这个网站申请环境进行操作https://ncc.douxuedu.com/ 虚拟机使用的是自行创建…

分类算法和回归算法区别

分类算法和回归算法在机器学习中扮演着不同的角色&#xff0c;它们的主要区别体现在输出类型、应用场景以及算法目标上。以下是对两者区别和使用场景的详细分析&#xff1a; 一、区别 1.输出类型&#xff1a; 分类算法&#xff1a;输出是离散的类别标签&#xff0c;通常表示为…

【网络安全的神秘世界】文件上传、JBOSS、Struct漏洞复现

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 攻防环境搭建及漏洞原理学习 Kali安装docker 安装教程 PHP攻防环境搭建 中间件介绍 介于应用系统和系统软件之间的软件。…

class的流光效果

效果图&#xff1a; 代码示例 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&g…