iview自定义表单验证 多表单同时验证 阿星小栈

2024-05-09 20:38

本文主要是介绍iview自定义表单验证 多表单同时验证 阿星小栈,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、自定义验证

   

 data () {const validateSectionFileType = (rule, value, callback) => {if (value <= 0) {callback(new Error('类型不能为空'));} else {callback();}};const validateSectionTime = (rule, value, callback) => {if (value === '') {callback(new Error('时间不能为空'));} else {callback();}};const validateSectionDuration = (rule, value, callback) => {if (!value) {callback(new Error('时间不能为空'));} else {callback();}};const validateSectionIsFree = (rule, value, callback) => {if (value === '') {callback(new Error('请选择是否收费'));} else {callback();}};return {ruleEditSection: {title: [{required: true, message: '小节标题不能为空', trigger: 'blur'}],subTitle: [{required: true, message: '小节副标题不能为空', trigger: 'blur'}],duration: [{ required: true,type: Number, message: '请填写持续时间', trigger: 'blur', validator: validateSectionDuration},],startTime: [{ required: true,message: '请选择开始时间',type: String , trigger: 'change', validator: validateSectionTime},],sectionDesc: [{ required: true,required: true, message: '小节介绍不能为空', trigger: 'blur'}],type: [{ required: true,message: '请选择类型',type: Number | String, trigger: 'change', validator: validateSectionFileType},],sectionUrl: [{required: true, message: '文件不能为空', trigger: 'change'}],isFree: [{ required: true, message: '请选择是否免费',type: Number | String,  trigger: 'blur', validator: validateSectionIsFree}]}};},

 

二、v-for  多表单同时验证

 <div class="form-item width-95" v-for="(section, index) in sectionLists"><Card><Form :label-width="100" ref="sectionLists" :model="section" :rules="ruleEditSection"><FormItem label="小节标题" class="width-24" prop="title">。。。。。。</FormItem></Form></Card></div>

 

 for (let i = 0; i < this.sectionLists.length; i++) {let validateStatus = false;this.$refs['sectionLists'+i].validate((valid)if (!validateStatus) {console.log(i)return false;}}this.$refs[].validate((valid)
this.$refs[].validate((valid)

 此时ref里面是待验证数组

 

  

 

这篇关于iview自定义表单验证 多表单同时验证 阿星小栈的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/974440

相关文章

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField