el-form中使用v-model和prop实现动态校验

如何在Vue的el-form中使用v-model和prop实现动态校验,包括多个变量控制校验、数组循环校验和字段级条件显示。通过实例演示了如何配合rules和自定义验证函数来确保表单的完整性和有效性。

 

公式: 动态校验项的v-model的绑定值 = el-form的属性 :model的值 + '.' + :prop属性的值
以此反推 :prop属性的值
此公式适应与element、element-plus、ant-design-vue组件库的表单校验

场景:本文是三种表单校验
1.多个变量控制某一项校验
2.对于数组for循环,校验每一项
3.对于两个不同的字段,分别v-if显示隐藏的校验

 

 1. required: true 会有 * , 但仅是触发最后点击提交按钮时,校验某一项位必填;与输入事件或者选择或者失焦时候 怎么校验无关 (这时候的校验取决于是否写了具体的校验规则)为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示
.
2.触发哪一条规则的校验和如何触发校验?
(1)触发哪一条规则的校验:
        a、如果该el-form-item绑定了具体某个:rules=“rules.abc”,则触发abc的规则
        b、默认取决于该el-form-item所绑定的prop字段,需要注意的是该prop属性在rules里必须要有,但是在form表单绑定的formData大对象里可有可无。
(2)如何触发该条校验:

取决于一级el-form-item下的子元素里的所有有的绑定了formData变量的元素和对应的trigger事件触发(所以可以多个输入框或选择框触发一项的校验事件)。需要注意该一级el-form-item下的子元素如果也包含了二级el-form-item和对应其他的prop,那么二级的el-form-item和对应其他的prop下的绑定变量和事件仅仅会触发二级自己的校验,而不会触发到一级的事件

一、多个变量控制某一项校验。

 

 简单代码:重点在于prop="zdxx"自定义绑定自定义校验事件

    <el-form v-loading="loading" ref="ruleFormRef" :model="formData" :rules="rules" label-width="160px"class="demo-ruleForm" :size="'default'" status-icon><el-row :gutter="24"><el-col :span="12"><el-form-item label="云主机名称:" prop="virtualMachineName"><el-input placeholder="请输入" clearable /></el-form-item></el-col><el-col :span="24"><el-form-item label="站点信息:" prop="zdxx"><el-col :span="12"><el-checkbox :disabled="formData.applyVirtualMachineType === 2"v-if="canEdit && formData.applyVirtualMachineType !== 2" v-model="formData.supportSiteAFlag" label="主调"size="large" @change="changeCheckbox('siteAIp')" /><el-checkbox disabled v-else v-model="formData.supportSiteAFlag" label="主调" size="large" /></el-col><el-col :span="12"><el-checkbox :disabled="formData.applyVirtualMachineType === 2"v-if="canEdit && formData.applyVirtualMachineType !== 2" v-model="formData.supportSiteBFlag" label="备调"size="large" @change="changeCheckbox('siteBIp')" /><el-checkbox disabled v-else v-model="formData.supportSiteBFlag" label="备调" size="large" /></el-col><el-col :span="12"><template v-if="formData.supportSiteAFlag"><el-form-item prop="siteAIp"><el-input :disabled="formData.applyVirtualMachineType === 2"v-if="canEdit && formData.applyVirtualMachineType !== 2" v-model="formData.siteAIp" placeholder="请输入"clearable /><span v-else>主调IP:<span class="ml">{{ formData.siteAIp }}</span></span></el-form-item></template></el-col><el-col :span="12"><template v-if="formData.supportSiteBFlag"><el-form-item prop="siteBIp"><el-input :disabled="formData.applyVirtualMachineType === 2"v-if="canEdit && formData.applyVirtualMachineType !== 2" v-model="formData.siteBIp" placeholder="请输入"clearable /><span v-else>备调IP:<span class="ml">{{ formData.siteBIp }}</span></span></el-form-item></template></el-col></el-form-item></el-col></el-row></el-form>let formData = ref({virtualMachineName: undefined,// zdxx: [],supportSiteAFlag: false,siteAIp: undefined,supportSiteBFlag: false,siteBIp: undefined,
})const isSite = (rule, value, callback) => {if (!formData.value.supportSiteAFlag && !formData.value.supportSiteBFlag) {callback(new Error('请选择站点信息'))} else {callback()}
}const rules = reactive({virtualMachineName: [{ required: true, message: '请输入云主机名称', trigger: 'blur' },],zdxx: [{ required: true, validator: isSite, trigger: 'change' },],// supportSiteAFlag: [{ required: true, validator: isSite, trigger: 'change' },],siteAIp: [{ validator: isIp1, trigger: 'blur' },],// supportSiteBFlag: [{ required: true, message: '请选择备调', trigger: 'change' },],siteBIp: [{ validator: isIp2, trigger: 'blur' },],
})

二、新增和删除表单项,动态校验。

el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项

以下代码可直接复制:重点在于:prop :rules :key。
公式: 动态校验项的v-model的绑定值 = el-form的属性 :model的值 + '.' + :prop属性的值

根据公式倒推 :prop
例如:v-model=“domain.premium” 就是 dynamicValidateForm.premiumList[index].premium ,而且:model=“dynamicValidateForm”
所以得到 :prop = ‘premiumList.’ + index + ‘.premium’

<template><div><el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="110px" class="demo-dynamic"><div class="bor_box" v-for="(domain, index) in dynamicValidateForm.premiumList" :key="domain.key"><el-col :span="24"><div class="box4_div"><el-col :span="5"><el-form-item label="保费:" :prop="'premiumList.' + index + '.premium'" :rules="{required: true, message: '保费不能为空', trigger: 'blur'}"><el-input class="num_input" placeholder="请输入" v-model="domain.premium"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="保费率:" :prop="'premiumList.' + index + '.rate'" :rules="{required: true, message: '保费率不能为空', trigger: 'blur'}"><el-input class="num_input" placeholder="请输入" :precision="2" :step="0.01" v-model="domain.rate"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="上游费用率:" :prop="'premiumList.' + index + '.feeRate'" :rules="{required: true, message: '上游费用率不能为空', trigger: 'blur'}"><el-input class="num_input" placeholder="请输入" :max="100" v-model="domain.feeRate"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="上游费用额:" :prop="'premiumList.' + index + '.fee'" :rules="{required: true, message: '上游费用额不能为空', trigger: 'blur'}"><el-input class="num_input" placeholder="请输入" v-model="domain.fee"></el-input></el-form-item></el-col><el-col :span="4"><el-button @click.prevent="removeDomain(domain,index)">删除</el-button></el-col></div></el-col></div><div><el-form-item><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="addDomain">添加保费</el-button><el-button @click="resetForm('dynamicValidateForm')">重置</el-button></el-form-item></div></el-form></div>
</template><script>
export default {data () {return {dynamicValidateForm: {premiumList: [{selected: 'Y', premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: '', shangyoufeiyonge_unit: '', downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: '',}],},}},created () {},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!')} else {console.log('error submit!!')return false}})},resetForm (formName) {this.$refs[formName].resetFields()},removeDomain (item, index) {if (index !== 0) {this.dynamicValidateForm.premiumList.splice(index, 1)}},addDomain () {this.dynamicValidateForm.premiumList.push({selected: 'N', premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: '', shangyoufeiyonge_unit: '', downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: '',key: Date.now()})},},
}
</script><style lang="less" scoped>
.bor_box {margin-left: 50px;margin-bottom: 10px;overflow: hidden;
}
</style>

三、el-form表单校验v-if不生效、el-form表单校验v-show不生效:

例如有个表单项,通过控制显示两个不同的表单项内容,分别需要校验对应的表单项即可。
如果是直接用v-if,会发现切换时候,校验不生效;
如果直接使用v-show,又发现即使不切换,隐藏了另外的表单项,也会触发校验规则。
正确做法是:使用v-if控制表单项的显示隐藏,同时需要给el-form-item加上自己的 prop=" " 和 key=" " ,这样才能区分。当然:rules 也要有自己对应的提示。

    <template v-if="flag"><el-form-item label="姓名:" prop="name" key="name" :rules="rules.name"><el-input v-model="formData.name" placeholder=""></el-input></el-form-item></template><template v-else><el-form-item label="退回原因:" prop="desc" key="desc" :rules="rules.desc"><el-input type="textarea" maxlength="500" show-word-limit v-model="formData.desc" placeholder="请填写退回原因"></el-input></el-form-item></template>

 

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

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

相关文章

多系统萎缩不慌张,这些维生素是你的“守护神”✨

亲爱的朋友们&#xff0c;今天我们来聊聊一个可能不太为人熟知但至关重要的健康话题——多系统萎缩&#xff08;MSA&#xff09;。面对这样的挑战&#xff0c;除了医疗治疗&#xff0c;日常的营养补充也是不可或缺的一环。特别是维生素&#xff0c;它们在我们的身体中扮演着举足…

CuponesController : ControllerBase

目录 一、CuponesController : ControllerBase 二、CuponesController : ControllerBase 三、CuponesController : ControllerBase 四、CuponesController : ControllerBase 五、CuponesController : ControllerBase 一、CuponesController : ControllerBase namespace A…

FastGPT+ollama 搭建私有AI大模型智能体工作流-Mac

一、大模型工作流的优势 1. 降低任务门槛&#xff1a;工作流可以将复杂任务分解成多个小任务&#xff0c;降低每个任务的复杂度&#xff0c;从而减少对提示词和大模型推理能力的依赖。这样可以提升大模型处理复杂任务的性能和容错能力。 2. 提升任务效率&#xff1a;工作流可以…

【OpenHarmony】openharmony移植到RK3568------获取源码编译OpenHarmony源码

一、源码获取 源码获取有好几种方式&#xff0c;在这里直接在镜像网站下载源码&#xff0c;点击下面连接下载全量版本的OpenHarmony4.1 https://repo.huaweicloud.com/openharmony/os/4.1-Release/code-v4.1-Release.tar.gz 将源码放到自己建立的目录下解压&#xff0c;我放…

PHP轻创推客集淘客地推任务平台于一体的综合营销平台系统源码

&#x1f680;轻创推客&#xff0c;营销新纪元 —— 集淘客与地推任务于一体的全能平台&#x1f310; &#x1f308;【开篇&#xff1a;营销新潮流&#xff0c;轻创推客引领未来】 在瞬息万变的营销世界里&#xff0c;你还在为寻找高效、全面的营销渠道而烦恼吗&#xff1f;&…

[Meachines] [Easy] jerry Tomcat用户暴力破解+war包webshell上传

信息收集 IP AddressOpening Ports10.10.10.95TCP:8080 $ sudo masscan -p1-65535 10.10.10.95 --rate1000 -e tun0 > /tmp/ports $ ports$(cat /tmp/ports | awk -F " " {print $4} | awk -F "/" {print $1} | sort -n | tr \n , | sed s/,$//) $ …

理解Flink数据流图

前言 在大数据处理的世界里,Apache Flink 已经成为处理实时数据流的一个强大工具。Flink 提供了一种高度灵活的方法来构建复杂的数据处理管道,其核心是所谓的 DataFlow 图模型。本文将带你深入了解 Flink DataFlow 图的基础知识,帮助你理解它是如何工作的以及如何利用它来构…

微服务——远程调用

为什么需要远程调用&#xff1f; 在微服务架构中&#xff0c;每个服务都是独立部署和运行的&#xff0c;它们之间需要相互协作以完成复杂的业务逻辑。因此&#xff0c;远程调用成为微服务之间通信的主要方式。通过远程调用&#xff0c;一个服务可以请求另一个服务执行某些操作或…

【前端面试】操作系统

进程与线程 进程线程定义是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位是进程中的一个实体&#xff0c;是CPU调度和分派的基本单位&#xff0c;共享进程的资源资源分配拥有独立的内存空间和系统资源共享进程的内存和资源开销…

Educational Codeforces Round 169 (Rated for Div. 2)

前言 电脑显示屏一闪一闪地感觉要拿去修了&#xff0c;比赛时重启了好几次。 手速场&#xff0c;E 题没学过 Sprague-Grundy 吃了亏&#xff0c;好在前四题都一发过才不至于掉分。 Standings&#xff1a;1214 题目链接&#xff1a;Dashboard - Educational Codeforces Round 16…

【架构设计】-- aarch(ARM) and X86

1、aarch(ARM) 架构 &#xff08;1&#xff09;操作系统支持&#xff1a;早期为 32 位操作系统&#xff0c;目前大部分都是 64 位操作系统 &#xff08;2&#xff09;全称&#xff1a;Advanced RISC Machine&#xff0c;由英国ARM Holdings plc公司开发 这种架构主要⽤于智能…

2.11、matlab中for循环,if else判断语句,break和continue用法以及switch case语句使用

1、前言 在MATLAB中,for循环用于迭代一个固定次数的循环。可以使用if else语句在循环中进行条件判断,根据条件的不同执行相应的代码块。break和continue可以用于控制循环的执行流程,break用于提前结束循环,而continue用于跳过当前循环迭代,继续下一次迭代。switch case语…

Android车载蓝牙音乐实例(附Demo源码):实现手机播放音乐后车机应用显示音乐名称,歌手,专辑名。且可控制上一曲下一曲,暂停播放功能

一、功能需求 功能需求是在Android10以上设备上实现蓝牙音乐功能&#xff0c;细分为两个功能点&#xff1a; 1、手机和车载设备实现蓝牙连接 &#xff08;本Demo文只做监听蓝牙连接状态&#xff0c;需手动到设置中连接蓝牙&#xff09; 2、连接蓝牙成功后手机播放音乐时车载…

Python常用内置函数(二)

Python 常用内置函数及示例&#xff08;续&#xff09; 在前面的基础上&#xff0c;我们将继续介绍另外50个常用的Python内置函数&#xff0c;并给出每个函数的简短说明和示例。 1. callable() 功能: 检查对象是否可调用。示例:def func(): pass print(callable(func)) # 输…

leetcode 递归(回溯)——java实现

递归算法与DFS类似&#xff0c;也与二叉树的先序遍历类似 以下摘自 leetcode回溯算法入门级详解 回溯法 采用试错的思想&#xff0c;它尝试分步的去解决一个问题。在分步解决问题的过程中&#xff0c;当它通过尝试发现现有的分步答案不能得到有效的正确的解答的时候&#xff…

了解蜜罐网络技术:网络安全中的诱捕与防御

在网络安全领域&#xff0c;攻击者和防御者之间的斗争日趋激烈。为了更好地识别、分析和抵御网络攻击&#xff0c;安全专家开发了一种称为蜜罐网络技术&#xff08;Honeypot Network Technology&#xff09;的防御策略。蜜罐网络不仅能够吸引攻击者进入虚假的环境&#xff0c;从…

MySQL笔记01: MySQL入门_1.2 MySQL下载安装与配置

2.2 MySQL下载安装与配置 2.2.1 MySQL下载 MySQL中文官网&#xff1a;https://www.mysql.com/cn/ MySQL英文官网&#xff1a;https://www.mysql.com/ MySQL官网下载地址&#xff1a;https://www.mysql.com/downloads/ &#xff08;1&#xff09;点击“MySQL Community (GPL) Do…

TinaSDKV2.0 自定义系统开发

TinaSDKV2.0 自定义系统开发 什么是自定义系统&#xff1f; TinaSDK Kconfig界面配置 Tina Linux采用 Kconfig 机制对 SDK 和内核进行配置。 Kconfig 是一种固定格式的配置文件。Linux 编译环境中的 menuconfig 程序可以识别这种格式的配置文件&#xff0c;并提取出有效信息…

catvod、TVBox源的解析过程分析和Spider参数覆盖问题解决

文章目录 TVBox官网源内容的结构 Spider参数覆盖问题Spider参数覆盖问题的解决脚本附录&#xff1a;核心代码分析首页详情页面播放界面获取播放信息源内容配置类Jar包解析类Js解析类Spider TVBox官网 TVBox项目索引&#xff1a;https://github.com/o0HalfLife0o/TVBoxOSC/ 完…

LibreWolf使用记录

之前一直使用Firefox作为个人主力浏览器&#xff0c;工作上由于有些网页兼容问题&#xff0c;一直使用的是Chrome。自从看了Eric Murphy 关于浏览器的分类之后, 出于对隐私的考虑&#xff0c;还是决定把chrome换成Brave&#xff0c;同时考虑对Firefox进行harden或者使用LibreWo…