el-form实现其中一个填写即可的校验

 

 

      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="130px"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="司机姓名 :" prop="driverName">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverName"
                placeholder="请输入司机姓名"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系方式 :" prop="driverPhone">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverPhone"
                placeholder="请输入联系方式"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号 :" prop="driverCard">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverCard"
                placeholder="请输入身份证号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="归属部门 :" prop="deptId">
              <el-select
                :disabled="isDisable"
                v-model="formData.deptId"
                @change="deptChange"
                filterable
                placeholder="请选择归属部门"
              >
                <el-option
                  v-for="(item, index) in deptList"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="驾驶证编号 :" prop="driverNum">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverNum"
                placeholder="请输入驾驶证编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="过期时间 :" prop="driverExpireTime">
              <el-date-picker
                :disabled="isDisable"
                v-model="formData.driverExpireTime"
                style=""
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="ic卡号 :" prop="cardId">
              <el-select
                v-model="formData.cardId"
                :disabled="isDisable"
                filterable
                placeholder="请输入ic卡号"
              >
                <el-option
                  v-for="(item, index) in cardNumList"
                  :key="index"
                  :label="item.cardNum"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="指纹编号 :" prop="printCode">
              <el-input
                :disabled="isDisable"
                v-model="formData.printCode"
                placeholder="请输入指纹编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="人脸编号 :" prop="faceCode">
              <el-input
                :disabled="isDisable"
                v-model="formData.faceCode"
                placeholder="请输入人脸编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注 :" prop="remark">
              <el-input
                :disabled="isDisable"
                v-model="formData.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="图片 :" prop="image">
              <multipleUpload
                v-if="isShowImgVideo"
                :disabled="detailsShow"
                :limit-count="4"
                :img-list="imgList"
                :submit-img="submitImg"
                @getImg="getImgUpload"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

  data() {
    return {
        formData: {},
 formRules: {
        driverName: [
          { required: true, message: "请输入司机姓名", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请选择归属部门", trigger: "blur" },
        ],
        cardId: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
        printCode: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
        faceCode: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
      },
    }
 }

methods:{

    /**
     * @Event 方法
     * @description: ic卡号 指纹编号 人脸编号 其中一个必填校验
     * */
    validateAtLeastOneRequired(rule, value, callback) {
      const field = "ic卡号、指纹编号、人脸编号";
      if (
        this.formData.cardId ||
        this.formData.printCode ||
        this.formData.faceCode
      ) {
        callback();
      } else {
        callback(new Error(`${field}至少填写一个`));
      }
    },


    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        } else {
          return false;
        }
      });
    },
}

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

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

相关文章

西电_矩阵论_学习笔记

文章目录 【 第一章 线性空间 】【 第二章 范数 】【 第三章 矩阵函数 】【 第四章 矩阵分解 】【 第五章 矩阵特征值估计 】【 第六章 广义逆 】【 考试重点内容总结 】 这是博主2023春季西电所学矩阵论的思维导图&#xff08;软件是幕布&#xff09;&#xff0c;供大家参考&a…

GaussDB OLTP云数据库配套工具DRS

目录 一、前言 二、DRS定义与使用场景 1、DRS定义 2、DRS场景示意图 三、DRS核心功能 1、实时迁移管理 2、实时同步管理 3、备份迁移管理 4、数据订阅管理 5、实时灾备管理 四、小结 一、前言 华为GaussDB云数据库提供了配套的生态工具数据复制服务DRS。 DRS围绕云…

漏洞深度分析 | CVE-2023-36053-Django 表达式拒绝服务

​ 项目介绍 Django 是一个高级 Python Web 框架&#xff0c;鼓励快速开发和简洁、务实的设计。它由经验丰富的开发人员构建&#xff0c;解决了 Web 开发的大部分麻烦&#xff0c;因此您可以专注于编写应用程序&#xff0c;而无需重新发明轮子。它是免费且开源的。 项目地址…

Squid 缓存服务器

Squid 缓存服务器 作为应用层的代理服务软件&#xff0c;Squid 主要提供缓存加速和应用层过滤控制的功能 ☆什么是缓存代理 当客户机通过代理来请求 Web 页面时 指定的代理服务器会先检查自己的缓存&#xff0c;如果缓存中已经有客户机需要访问的页面&#xff0c;则直接将缓…

【考研思维题】【哈希表 || 什么时候用哈希表呢?快速查询的时候】【我们一起60天准备考研算法面试(大全)-第九天 9/60】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

ModaHub魔搭社区:向量数据库Zilliz Cloud删除 Entity和删除 Collection教程

目录 删除单个 Entity 批量删除 Entity 开始前 操作步骤 使用限制 Entity 是指存储在 Zilliz Cloud 集群中的数据实体,包含用于处理、搜索和查询的数据。如果您不再需要某个 Entity,可以执行相关操作将其删除。 本文介绍如何从 Collection 中删除单个或多个 Entity。 …

网络数据包的监听与分析——IP数据报文分析

1. 抓包工具下载 x下面是一个IP数据报的抓包软件——IPtool的蓝奏云下载链接 https://wwix.lanzoue.com/iaGpy11klpnc 2. iptool使用 下载解压之后&#xff0c;右击以管理员身份运行&#xff0c;打开该exe文件即可 然后点击绿色运行就开始捕包了 随便点一个包进去进行分析就可…

JAVA-MAVEN初学者教程(配置、pom.xml、依赖管理等)

目录 认识MAVEN安装&配置MAVENwindows安装MAVENMAVEN的配置本地仓库 localRepository镜像 mirrors代理仓库 respositories代理 proxies IDEA配置MAVEN&#xff08;一个module&#xff09; MAVEN生命周期install下载包 模块的pom.xml坐标gav打包方式 package属性值 properti…

web 前端 Day 4

盒子模型 <style>div {width: 300px;height: 300px;background-color: pink;padding-left: 4px; 左侧内边距border: 3px solid red;margin: 50px;}</style> padding 内边距 </head> ​ <body> ​<div>cfdaffshydghjgdjdnjjjjjjjjjjjjjjj&l…

Spark学习--3、WordCount案例、RDD序列化、RDD依赖关系、RDD持久化

1、WordCount案例实操 导入项目依赖 <dependencies><dependency><groupId>org.apache.spark</groupId><artifactId>spark-core_2.12</artifactId><version>3.3.0</version></dependency> </dependencies>1.1 本…

2023年java还是golang还是c#?

前言 我们可以先来看一下这三门语言各自的优劣 学习曲线&#xff1a;如果你是初学者或对编程相对陌生&#xff0c;Java可能是一个较好的选择。它有广泛的学习资源和社区支持&#xff0c;易于上手。Go也有简单易学的特点&#xff0c;但由于相对较年轻&#xff0c;相关的学习资…

Linux驱动进阶(一)——设备驱动中的并发控制

文章目录 前言并发与竞争原子变量操作原子变量操作原子整型操作原子位操作 自旋锁自旋锁概述自旋锁的使用自旋锁的使用注意事项 信号量信号量概述信号量的实现信号量的使用自旋锁与信号量的对比 完成量完成量概述完成量的实现完成量的使用 小结 前言 现代操作系统有三大特征&a…

frp内网穿透

frp内网穿透 一.frp的作用和原理图 1.首先frp分客户端和服务端&#xff0c;frp客户端和服务端在同一个局域网。 2.frp服务端拥有公网ip与互联网连通。 frp的作用&#xff1a; 通过一台公司拥有外网ip的服务器做为frp服务端&#xff0c;通过请求转发的形式&#xff0c;转发到公…

Qt,day4

闹钟 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);this->setWindowTitle("闹钟");this->setWindowIcon(QIcon("D:\\HQYJRJ\\QT\\day1\\…

二十三种设计模式第十六篇--观察者模式

观察者模式是一种行为型设计模式&#xff0c;它建立了一种对象间的一对多依赖关系&#xff0c;使得当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。这种模式可以实现对象间的松耦合通信&#xff0c;提高系统的可扩展性和灵活性。 观察者模…

TCP连接管理(三次握手,四次挥手)

目录 一、回顾一下TCP包头二、连接的建立——“三次握手”三、连接的建立——“四次挥手”保活计时器 一、回顾一下TCP包头 源端口号&#xff08;Source Port&#xff09;&#xff1a;16 位字段&#xff0c;表示发送方的端口号。 目的端口号&#xff08;Destination Port&…

FTP服务器

文章目录 FTP服务器FTP的数据传输原理FTP的功能简介不同等级的用户身份命令记录与日志文件记录限制用户活动的目录 FTP的工作流程与使用到的端口FTP主动式连接FTP被动式连接 vsftpd服务器基础设置为什么使用vsftpd所需要的软件以及软件结构vsftpd.conf 配置值说明与服务器环境比…

Leetcode---352周赛

周赛题目 2760. 最长奇偶子数组 2761. 和等于目标值的质数对 2762. 不间断子数组 2763. 所有子数组中不平衡数字之和 一、最长奇偶子数组 这题的数据范围允许用暴力来做&#xff0c;只要我们分别枚举左端点left和右端点right&#xff0c;然后看区间[left,right]是否符合题目条…

vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)

src下面建立一个xx.d.ts的文件 declare module *.vue {import { ComponentOptions } from vueconst componentOptions: ComponentOptionsexport default componentOptions }

数据结构错题集 第七章 查找

7.2 124 等比 1(1-2^h)/(1-2) 2^h - 1 查找失败的最小次数相等吗&#xff1f; 13.A D 推一下公式 &#xff08;M1&#xff09;/2 平均查找长度 17.有序 就可二分查找 记住向下取整就是往右 13题就是个例子 向上取整就是往左 7.3 A错 不会分裂 不是平衡树 12。 C 黑高…