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

news2024/10/25 8:16:45

业务场景:

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

    <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' }],
    
  })

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

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

相关文章

rmmod无法卸载驱动程序

出现问题&#xff1a; 在加载好驱动程序key_to_led_drv.ko 运行app然后使用ctrlz退出的时候&#xff0c;无法使用rmmod卸载程序 出现问题&#xff1a; 原因进程没有被杀死&#xff1a; 调试过程&#xff1a; 使用lsmod里的信息&#xff1a; used为驱动占用的计数值 当计数…

Java+ffmpeg 合并两个mp4文件

使用ffmpeg测试命令 ffmpeg -i "E:\Monitor\video_20240617_10.mp4" -i "E:\Monitor\video1_20240617_10.mp4" -filter_complex "[0:v][0:a][1:v][1:a]concatn2:v1:a1[v][a]" -map "[v]" -map "[a]" -c:v libx264 -c:a…

数据分析第十一讲:pandas应用入门(六)

pandas应用入门&#xff08;六&#xff09; 我们再来看看Index类型&#xff0c;它为Series和DataFrame对象提供了索引服务&#xff0c;有了索引我们就可以排序数据&#xff08;sort_index方法&#xff09;、对齐数据&#xff08;在运算和合并数据时非常重要&#xff09;并实现…

2024.6.16 机器学习周报

目录 引言 Abstract 文献阅读 1、题目 2、引言 3、创新点 4、匹配问题 5、SuperGlue架构 5.1、注意力图神经网络&#xff08;Attentional Graph Neural Network&#xff09; 5.2、最佳匹配层&#xff08;Optimal matching layer&#xff09; 5.3、损失 6、实验 6.…

裂变客户时代:如何打造口碑传播的良性循环?【以Notion为例】

在当今的商业环境中&#xff0c;客户裂变已经成为品牌增长的重要驱动力。裂变客户时代&#xff0c;意味着每一个满意的客户都有可能成为品牌的传播者&#xff0c;帮助品牌吸引更多的新客户。那么&#xff0c;如何在这个时代打造口碑传播的良性循环呢&#xff1f;Notion是怎么做…

Python 接口自动化测试

一、基础准备 1. 环境搭建 工欲善其事必先利其器&#xff0c;废话不多说。我们先开始搭建环境。 # 创建项目目录mkdir InterfaceTesting# 切换到项目目录下cd InterfaceTesting# 安装虚拟环境创建工具pip install virtualenv# 创建虚拟环境&#xff0c;env代表虚拟环境的名称&…

微信小程序学习(十):生命周期

1、应用生命周期 生命周期说明onLaunch监听小程序初始化&#xff0c;全局只会执行 1 次onShow监听小程序启动或切前台onHide监听小程序切后台 &#x1f517;应用生命周期官方文档 App({/*** 当小程序初始化完成时&#xff0c;会触发 onLaunch&#xff08;全局只触发一次&…

李宏毅深度学习03——神经网络训练不起来怎么办

视频链接 如果Optimization失败的时候&#xff0c;怎么把梯度下降做的更好&#xff1f; 只考虑这种情况&#xff0c;不考虑overfitting 局部最小值&#xff08;local minima&#xff09;和鞍点&#xff08;saddle point&#xff09; 为什么Optimization会失败&#xff1f; …

用AI帮助设计师提升工作效率?

在创意设计的世界里&#xff0c;效率往往意味着灵感与时间的完美结合。设计师们时常面临各种挑战&#xff0c;如何在保证作品质量的同时&#xff0c;又能提升工作效率&#xff1f;这不仅是设计师们思考的问题&#xff0c;也是AI技术正在积极解决的问题。那么&#xff0c;用AI帮…

Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装

Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装 目录 Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装 一、简单介绍 二、实现原理 三、注意实现 四、简单效果预览 五、案例简单实现步骤 六、关键代码 一、简单介绍 Unit…

Spring系统学习 - FactoryBean和基于XML的自动装配

Factory Bean Spring的FactoryBean是一个特殊的Bean&#xff0c;用于创建其他Bean实例。FactoryBean接口定义了一个工厂Bean&#xff0c;该Bean可以用来生成其他Bean的实例。通过实现FactoryBean接口&#xff0c;开发人员可以自定义Bean的创建逻辑&#xff0c;实现更灵活的Bea…

动态竞拍与寄售模式:引领企业增长的新引擎

在当今日新月异的商业环境中&#xff0c;企业的生存与发展不仅需要卓越的产品和服务&#xff0c;更需要紧跟市场脉搏&#xff0c;勇于创新。接下来&#xff0c;我将为您详细介绍一种引领行业新风尚的商业模式——动态竞拍与寄售相结合的模式。这一模式凭借其灵活性和创新性&…

图像处理与视觉感知复习--频率域图像增强图像变换

文章目录 图像变换与信号分解正弦信号与傅里叶级数傅里叶变换离散傅里叶变换(DFT)频率域滤波 图像变换与信号分解 空间域&#xff1a;就是像素域&#xff0c;在空间域的处理是在像素级的处理&#xff0c;如像素级的叠加。 频率域&#xff1a;任何一个波形都可以分解用多个正弦…

【类型转换】C++中char、char*、int、string相互转换函数及string转不同进制数函数

参考资料&#xff1a;cplusplus官方资料strtol 函数用法 总结&#xff1a; 1、这些在做编程题处理输入数据时常用&#xff0c;需要牢记。

【CT】LeetCode手撕—23. 合并 K 个升序链表

目录 题目1- 思路2- 实现⭐23. 合并 K 个升序链表——题解思路 3- ACM 实现 题目 原题连接&#xff1a;23. 合并 K 个升序链表 1- 思路 模式识别&#xff1a;合并 K 个链表 ——> 优先队列 思路 借助优先队列&#xff0c;每次从 k 个链表中&#xff0c;各取一个元素&…

前 OpenAI 首席科学家建「安全超级智能」实验室;Meta 重组元宇宙团队丨 RTE 开发者日报 Vol.228

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

Cytoscape之操作界面介绍

Cytoscape 简介 Cytoscape是一个专注于开源网络可视化和分析的软件。软件的核心部分提供了网络显示、布局、查询等方面的基本功能。软件的核心可以通过插件架构进行扩展&#xff0c;这样就能快速地开发出新的功能。 Cytoscape 源自系统生物学&#xff0c;用于将生物分子交互网…

springboot+vue+mysql+mybatis 二手交易平台

springbootvuemysqlmybatis 二手交易平台 相关技术 javaspringbootmybatismysqlvueelementui

Jenkins For Windows编译构建C#项目环境搭建(完整版)

安装Jenkins 下载Windows安装包 官方下载地址 选择稳定版&#xff0c;这里下载的是最新版&#xff0c;如需下载指定版本点击 以前的发行版 配置java环境 下载 java jdk 17 jdk17官方下载链接 这里下载的是msi版本的安装包 安装jdk17 双击运行安装包&#xff0c;一直下…

企业微信内嵌H5项目接入聊天功能

产品需求是,在列表中把符合条件的列表接入聊天功能,以下是详细步骤: 1.引入企业微信 <script src"https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script> 2.获取wx签名(必须要) /*** 获取wx签名**/ export function getWxJsApi(data) {r…