Element-UI表单验证 二选一、三选一、多选一验证

Element-UI表单验证二选一验证

在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证,比如联系方式中的手机号和固定电话只需要填写一项就可通过验证,针对这样情况可以使用Element-UI的自定义验证实现,具体实现方法如下。

HTML代码

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form"><el-row :xs="24" style="width:96%"><el-col :span="8"><el-form-item label="简单:" prop="singleChoiceEasy" ><el-input v-model.number="ruleForm.singleChoiceEasy" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceMedium')"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="中等:" prop="singleChoiceMedium"><el-input v-model.number="ruleForm.singleChoiceMedium" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceEasy')"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="困难:" prop="singleChoiceDifficulty"><el-input v-model.number="ruleForm.singleChoiceDifficulty" placeholder="题量" @input="clearRule('singleChoiceEasy','singleChoiceMedium')"></el-input></el-form-item></el-col></el-row>
</el-form>
data() {var validateNum= (rule, value, callback) => {if (!this.ruleForm.singleChoiceEasy && !this.ruleForm.singleChoiceMedium && !this.ruleForm.singleChoiceDifficulty) {callback(new Error('请至少填写一项'));} else {callback();}};return {ruleForm: {},rules: {singleChoiceEasy: [{ required: true,  validator: validateNum, trigger: 'blur' },{ type: 'number', message: '必须为正整数', trigger: 'blur'}],singleChoiceMedium: [{ required: true,  validator: validateNum, trigger: 'blur' },{ type: 'number', message: '必须为正整数', trigger: 'blur'}],singleChoiceDifficulty: [{ required: true,  validator: validateNum, trigger: 'blur' },{ type: 'number', message: '必须为正整数', trigger: 'blur'}]}}
},
methods: {clearRule(obj,obj1) {
//接收参数 表单propthis.$refs.ruleForm.clearValidate(obj);this.$refs.ruleForm.clearValidate(obj1);}
//另一种方式 表单@input 给他 
clearRule() {this.$refs.ruleForm.clearValidate();this.$refs.ruleForm.validateField(["singleChoiceEasy","singleChoiceMedium","singleChoiceDifficulty"]);}
}

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

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

相关文章

Web渗透:文件包含漏洞

Ⅱ.远程文件包含 远程文件包含漏洞&#xff08;Remote File Inclusion, RFI&#xff09;是一种Web应用程序漏洞&#xff0c;允许攻击者通过URL从远程服务器包含并执行文件&#xff1b;RFI漏洞通常出现在动态包含文件的功能中&#xff0c;且用户输入未经适当验证和过滤。接着我…

520. 检测大写字母 Easy

我们定义&#xff0c;在以下情况时&#xff0c;单词的大写用法是正确的&#xff1a; 全部字母都是大写&#xff0c;比如 "USA" 。 单词中所有字母都不是大写&#xff0c;比如 "leetcode" 。 如果单词不只含有一个字母&#xff0c;只有首字母大写&#xff0…

生产者发送数据,kafka服务器接收数据异常的问题记录

现象&#xff1a; 某个客户要求审计日志用kafka的方式传输给他们&#xff0c;使用了第三方的librdkafka库来开发。 往客户提供的kafka服务器上的一个topic发送数据&#xff0c;这个topic有三个分区&#xff0c;客户反馈接收到的数据和发送端发送的实际数量对不上&#xff0c;他…

代码随想录第五十二天打卡

647. 回文子串 动态规划解决的经典题目&#xff0c;如果没接触过的话&#xff0c;别硬想 直接看题解。 代码随想录 class Solution { public:int countSubstrings(string s) {vector<vector<bool>>dp(s.size(),vector<bool>(s.size(),false));int res0;for …

使用VMware创建Ubuntu 24.04【一】

相关链接下载地址 VMware https://www.vmware.com/content/vmware/vmware-published-sites/cn/products/workstation-pro/workstation-pro-evaluation.html.html.html Ubuntu 24.04 LTS https://cn.ubuntu.com/download/desktop 虚拟机创建 1、打开VNware软件&#xff0c;点…

5.9k!一款清新好用的后台管理系统!【送源码】

今天给大家分享的开源项目是一个优雅清新后台管理系统——Soybean Admin。 简介 官方是这样介绍这个项目的&#xff1a; Soybean Admin 使用的是Vue3作为前端框架&#xff0c;TypeScript作为开发语言&#xff0c;同时还整合了NaiveUI组件库&#xff0c;使得系统具有高可用性和…

Vue 3 的 <script setup> 语法糖中的e

在 Vue 3 的 <script setup> 语法糖中&#xff0c;可以通过直接在模板的事件监听器中访问事件对象&#xff08;通常命名为 e 或 event&#xff09;来传递它到方法。 以下是一个简单的例子&#xff0c;展示了如何在 Vue 3 的 <script setup> 中获取到 mousemove 事…

Windows 环境下 MySQL Server 清空 Log 文件命令

MySQL Community Server for Windows 下载&#xff1a; MySQL :: Download MySQL Community Server 清空 Log 文件步骤命令&#xff08;MySQL Server 8.0 为例&#xff09;&#xff1a; 1.杀掉 MySQL Workbench 进程 2.删除路径文件 C:\ProgramData\MySQL\MySQL Server 8.0\Dat…

基于YOLOv5+pyqt5的口罩佩戴检测系统(PyQT页面+YOLOv5模型+数据集)

简介 在各种工作环境和公共场所,确保人们正确佩戴口罩对个人防护和公共卫生至关重要,尤其是在医疗设施、制造业车间和拥挤的公共交通中。为了满足这一需求,我们开发了一种基于YOLOv5目标检测模型的口罩佩戴检测系统。本项目不仅实现了高精度的口罩佩戴检测,还设计了一个可…

学习提示词工程

去年 11 月 8 日&#xff0c;新加坡政府科技局&#xff08;GovTech&#xff09;组织举办了首届 GPT-4 提示工程&#xff08;Prompt Engineering&#xff09;竞赛。数据科学家 Sheila Teo 最终夺冠&#xff0c;成为最终的提示女王&#xff08;Prompt Queen&#xff09;。之后&am…

Swagger2及常用校验注释说明

Api(value "后台用户管理") RestController RequestMapping("bossuser") public class BossUserController {ApiOperation(value "测试接口")PostMapping("test")public String testUser(Valid RequestBody TestUser user) {LOG.inf…

机器学习之集成学习

一&#xff1a;概念 顾名思义集成学习就是用多个其他的算法结合起来使用 对于“其他算法”有同类和同质的区别&#xff0c;同质指的是所用的算法都是同一类型的&#xff0c;比如决策树和神经网络&#xff0c;这种也叫基学习器。反之亦然&#xff0c;但一般使用的是同质的。 …

6种高效便捷的移动硬盘加密软件,总有一款适合你

想要给自己移动硬盘内的文件/文件夹加密来保护数据隐私&#xff0c;防止重要信息泄露&#xff1f;使用电脑文件夹加密工具可以轻松帮您解决&#xff01;面对市面上众多的加密工具&#xff0c;如何选择成为一大难题。本文将为您提供一份详细的挑选指南&#xff0c;帮助您选择最合…

Java程序员接单的十条“野路子”,分分钟收入20K!

Java程序员除了主业工作外&#xff0c;也要适当扩展兼职接单这条路。毕竟Java接单可以说是Java程序员进行技术变现的最佳方式之一。 因为Java程序员兼职接单的难度相对更低&#xff0c;单量也比较可观&#xff0c;最重要的是性价比也很顶&#xff0c;且听我一一道来&#xff1a…

2024年6月24日 (周一) 叶子游戏新闻

图吧工具箱: 全名图拉丁吧硬件检测工具箱,是开源、免费、绿色、纯净的硬件检测工具合集,专为图钉及所有DIY爱好者制作,包含常用硬件测试和检测工具,月工JS必备! 土豆录屏: 免费、无录制时长限制、无水印的录屏软件 高手在民间 粉丝玩家打造精美《黄金树幽影》巨大插画虽然不是专…

大数据------额外软件、插件及技术------Linux(完整知识点汇总)

Linxu 不同领域的主流操作系统 桌面操作系统 WindowsMAac OSLinux 服务器端操作系统 UNIX&#xff08;付费&#xff09;LinuxWindows Server&#xff08;付费&#xff09; 移动设备操作系统 Android&#xff08;基于Linux开源&#xff09;IOS&#xff08;不开源&#xff09; 嵌…

深入理解代理模式(Proxy Pattern)及其实际应用

引言 在软件开发中&#xff0c;有时候我们需要在不改变现有代码的情况下添加一些功能&#xff0c;比如延迟初始化、访问控制、日志记录等。代理模式&#xff08;Proxy Pattern&#xff09;通过代理对象控制对原对象的访问&#xff0c;为现有代码添加了额外的功能。本篇文章将详…

Three.js鼠标拖动设置骨骼姿态

实现 根据SkinnedMesh生成Mesh 作为射线检测的目标&#xff08;射线检测SkinnedMesh存在不足 无法应用骨骼形变的顶点 &#xff09;点击模型 获取点击位置对应的骨骼拖拽鼠标设置骨骼旋转角度&#xff08;使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发…

PostgreSQL计算 queryid 原理

数据库版本 PG 16.1 queryid 是什么 queryid 是将 sql 规范化 (normalization) 后&#xff0c;通过哈希函数计算出来的 64 位整数。 以 SELECT id, data FROM tbl_a WHERE id < 300 ORDER BY data; 这条 SQL 为例。当我们在 PG 中执行这条 sql 时&#xff0c;内核在语义…

图论解法:哈密顿通路问题 Leetcode 2741. 特别的排列

描述 给你一个下标从 0 开始的整数数组 nums &#xff0c;它包含 n 个 互不相同 的正整数。如果 nums 的一个排列满足以下条件&#xff0c;我们称它是一个特别的排列&#xff1a; 对于 0 < i < n - 1 的下标 i &#xff0c;要么 nums[i] % nums[i1] 0 &#xff0c;要么…