el-form中一个el-form-item需要规则校验多个input

我的数据的格式:

formData: {
    ipAddress: {
        one: '',
        two: '',
    },
},

代码结构:

<el-form-item label="IP地址" prop="ipAddress">
    <el-input-number
        v-model="formData.ipAddress.one"
        class="ip-address"
        :controls="false"
        :precision="0"
        :max="255"
        :min="0"
    />
    <el-input-number
        v-model="formData.ipAddress.one"
        class="ip-address"
        :controls="false"
        :precision="0"
        :max="255"
        :min="0"
    />
</el-form-item>

规则示例:

rules: {
    ipAddress: [{ required: true, validator: this.checkMultiInput, trigger: 'blur' }]
}

 methods中:

checkMultiInput(rule, value, callback) {
    let allFieldsFilled = true;
    Object.keys(this.formData.ipAddress).forEach((key) => {
        if (!this.formData.ipAddress[key] && this.formData.ipAddress[key] !== 0) {
            allFieldsFilled = false;
        }
    });
    if (!allFieldsFilled) {
       callback(new Error('IP地址不能为空'));
    } else {
        callback();
    }
},

效果图:

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

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

相关文章

万能字符单词拼写 - 华为OD统一考试

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C++ 题目描述 有一个字符串数组 words 和一个字符串 chars。假如可以用 chars 中的字母拼写出 words 中的某个"单词"(字符串),那么我们就认为你掌握了这个单词。 words 的字符仅由 a-z 英文小写宁母组成,…

003-10-02【Spark官网思维笔记】香积寺旁老松树边马大爷家女儿大红用GPT学习Spark入门知识

003-10-02【Spark官网思维笔记】香积寺旁老松树边马大爷家女儿大红用GPT学习Spark入门知识. Spark 快速入门快速开始使用 Spark Shell 进行交互式分析&#xff1a;独立的应用程序其他 1, 使用 Spark Shell 进行交互式分析1.1 基本1.2 有关Dataset操作的更多信息1.3 缓存 2&…

景联文科技:以高质量数据赋能文生图大模型

1月5日&#xff0c;在智求共赢・中国AIGC产业应用峰会暨无界AI生态合作伙伴大会上&#xff0c;中国AIGC产业联盟联合无界AI发布了《中国AIGC文生图产业白皮书2023》&#xff0c;从AIGC文生图发展历程、主流工具、产业实践以及规模预测等多个维度&#xff0c;全面揭示了中国AIGC…

最新PyCharm安装详细教程及pycharm配置_pycharm安装教程

目录 一、PyCharm简介及其下载网站 二、单击网站的Downloads&#xff0c;进入二级页面&#xff0c;选择对应的操作系统下载PyCharm 三、PyCharm的安装程序的安装及其配置(configuration) 1、运行PyCharm Setup 2、安装位置设置 3、安装选项设置 4、开始菜单中PyCharm快捷方式的…

OpenHarmony4.0Release系统应用常见问题FAQ

前言 自OpenHarmony4.0Release发布之后&#xff0c;许多小伙伴使用了配套的系统应用源码以及IDE作为基线开发&#xff0c;也遇到了各种各样的问题&#xff0c;这篇文档主要收录了比较常见的一些问题解答。 FAQ 系统应用源码在哪 目前OpenHarmony系统应用分为3种模式&#x…

PHP留言板实现

完整教程PHP留言板 登陆界面 一个初学者的留言板&#xff08;登录和注册&#xff09;_php留言板登录注册-CSDN博客 留言板功能介绍 百度网盘 请输入提取码 进入百度网盘后&#xff0c;输入提取码&#xff1a;knxt&#xff0c;即可下载项目素材和游客访问页面的模板文件。 &…

独享静态代理IP在海外市场调研中的独特优势

独享静态代理IP在海外市场调研中扮演着至关重要的角色&#xff0c;提供了一系列无可比拟的优势。独享静态代理IP的稳定性和可靠性对于长期的市场调研至关重要&#xff0c;它保证了连接的持续性和数据的准确性。通过这些方面的综合优势&#xff0c;独享静态代理IP成为海外市场调…

Programming Abstractions in C阅读笔记:p242-p245

《Programming Abstractions in C》学习第67天&#xff0c;p242-p245总结&#xff0c;总计4页。 一、技术总结 6.2小结主要讲回溯算法及递归算法在迷宫求解中应用&#xff0c;当然&#xff0c;理解然后用代码实现出来还是有些难度的。不过&#xff0c;这并不影响我们进行下一…

Redis不同环境缓存同一条数据,数据内部值不同

背景 现实中&#xff0c;本地环境&#xff08;dev&#xff09;和开发环境&#xff08;feature&#xff09;会共同使用相同的中间件&#xff08;本篇拿Redis举例&#xff09;&#xff0c;对于不同环境中的&#xff0c;图片、视频、语音等资源类型的预览地址url&#xff0c;需要配…

PyQt5零基础入门(二)——QLabel控件

前言 QLabel控件可以视为是一个标签项&#xff0c;具有显示文本、图像的作用。在本篇文章中将介绍QLabel控件的常见用法。 例子 显示文本 import sys from PyQt5.QtWidgets import *if __name__ "__main__":app QApplication([])label QLabel(Hello world!)la…

安卓Android Studio读写MifareOne M1 IC卡源码

本示例使用的发卡器&#xff1a; https://item.taobao.com/item.htm?id615391857885&spma1z10.5-c-s.w4002-21818769070.11.66af789eLeok2R <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout …

【基础工具篇使用】VScode 远程 Ubuntu 系统 进行使用

文章目录 准备条件使用步骤step1&#xff1a; 打开远程窗口step2&#xff1a;选择中的红色框“Connect to Host”功能Step3: 根据图中的红色框提示信息输入远程电脑的用户名和 IP 地址&#xff0c;输入如下命令即可连接&#xff1a; 显示效果 准备条件 我们可以使用 vscode 的…

JS 函数

函数就是封装了一段可以被重复执行调用的代码块。目的&#xff1a;让大量代码重复利用 1、声明函数 方式一&#xff1a;利用函数关键字自定义函数&#xff08;命名函数&#xff09; function 函数名&#xff08;&#xff09;{//函数体代码} function是声明函数的关键字&#…

Windows11 安全中心页面不可用问题(无法打开病毒和威胁防护)解决方案汇总(图文介绍版)

本文目录 Windows版本与报错信息问题详细图片&#xff1a; 解决方案:方案一、管理员权限&#xff08;若你确定你的电脑只有你一个账户&#xff0c;则此教程无效&#xff0c;若你也不清楚&#xff0c;请阅读后再做打算&#xff09;方案二、修改注册表(常用方案)方案三、进入开发…

sqlilabs第四十九五十关

Less-49(GET - Error based - String Bind - ORDER BY CLAUSE) 手工注入 无回显(还是单引号闭合)&#xff0c;只能使用延时注入 自动脚本 和上一关一样 Less-50(GET - Error based - ORDER BY CLAUSE -numeric- Stacked injection) 手工注入 这里需要使用堆叠注入的思路 自…

电力能源监测管理系统,在医院中有哪些作用?

随着经济全球化的发展&#xff0c;节能减排成为当前社会发展必须关注的问题。电力能源监测管理系统&#xff0c;可以分析电力管理能源的现状&#xff0c;并根据现状提出对应的策略&#xff0c;为快速高效建成绿色智能化医院提供有力支撑和技术保障。 医院能源管理现状 1、人力…

市场复盘总结 20240111

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 昨日主题投资 连板进级率 100% 二进三&#xff1a; 进级率低 44% 最常用的二种方法&#xff1a; 方法一&a…

检测并批量导出项目文件中所有最近修改文件的实用工具

本篇文章主要讲解工具的使用和操作教程&#xff0c;这是一个能够检测项目内最近修改的文件并保留路径导出文件的实用工具。 日期&#xff1a;2024年1月10日 工具介绍&#xff1a; 这是一款可以帮助你自动检测并导出指定文件修改时间内的文件及文件目录的实用工具&#xff0c;在…

Appium 自动化测试

1.Appium介绍 1&#xff0c;appium是开源的移动端自动化测试框架&#xff1b; 2&#xff0c;appium可以测试原生的、混合的、以及移动端的web项目&#xff1b; 3&#xff0c;appium可以测试ios&#xff0c;android应用&#xff08;当然了&#xff0c;还有firefoxos&#xff09;…

确定了!软考中级「集成」、「监理」新版教程有哪些变化?

新版教程改了哪些内容&#xff1f;2024上半年软考应该如何备考&#xff1f; 准备考24年上集成的朋友们&#xff0c;先不要慌&#xff01;备考脚步不要乱&#xff0c;改版可能还是好事呢&#xff0c;难度可能会降点&#xff1f; 2024年教程改版科目&#xff1a; ✔软考中级-集…