【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里…

中服云数字孪生平台

中服云数字孪生平台是基于中服云物联网平台和数据中台打造的一款实时数据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…

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

高斯信道下通信感知一体化的性能极限(刘凡) 通信和感知在硬件结构上相似,高效地利用资源,实现相互的增益; 感知是基于不同的任务,比如目标检测(检测概率,虚警概率),估计任务(从收到的信号中去估计有用的参数,均方误差,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;。 二、前端职…

【网络安全的神秘世界】文件上传、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…

链表OJ

GDUFE 在期末前再刷一次链表题 ~ 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* removeElements(struct ListNode* head, int …

学习笔记——网络管理与运维——SNMP(SNMP版本)

二、SNMP版本 1、SNMP版本 SNMP共有三个版本&#xff1a;SNMPv1、SNMPv2c和SNMPv3。 (1)SNMPv1 1990年5月&#xff0c;RFC1157定义了SNMP的第一个版本SNMPv1。RFC1157提供了一种监口控和管理计算机网络的系统方法。SNMPv1基于团体名认证&#xff0c;安全性较差&#xff0c;…

手机天线都去哪里了?

在手机的演变历程中&#xff0c;天线的设计和位置一直是工程师们不断探索和创新的领域。你是否好奇&#xff0c;现在的手机为什么看不到那些曾经显眼的天线了呢&#xff1f; 让我们一起揭开这个谜题。 首先&#xff0c;让我们从基础开始&#xff1a;手机是如何发出电磁波的&…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…

腾讯云开端口

轻量服务器 由于开发者计划&#xff0c;这些腾讯云 阿里云什么的小vps&#xff0c;是非常之便宜&#xff0c;甚至到了白送的地步&#xff08;小阿&#xff09;&#xff0c;但是作为一个web安全学习者必要的vps操作还是要会的 开启端口 腾讯云的轻量服务器是没有安全组的&…