当前位置: 首页 > news >正文

el-form表单el-form-item prop一次验证两个值

1.表单添加两个框,prop写上

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
<el-form-item type="type" label="时间" prop="dateSectOne"><div class="timeShijian"><el-time-picker :clearable="false" v-model="ruleForm.dateSectOne.first" placeholder="开始时间" value-format="HH:mm" format="HH:mm"></el-time-picker><el-time-picker :clearable="false"  v-model="ruleForm.dateSectOne.second" value-format="HH:mm" placeholder="结束时间" format="HH:mm"></el-time-picker></div></el-form-item></<el-form >

2.data里写,验证规则添加validator: this.validateFields

ruleForm: {dateSectOne:{first:'',second:'',},
},
rules: {dateSectOne: [{validator: this.validateFields, required: true, message: '请选择班次时间'},],
}

3.validateFields设置

validateFields(rule, value, callback) {// 在这里编写验证逻辑if (value.second && value.first) {callback();} else {callback(new Error('请选择时间'));}},
http://www.lryc.cn/news/147337.html

相关文章:

  • HTTP 代理原理及 Python 简单实现
  • 数据结构--队列与循环队列
  • 八路参考文献:[八一新书]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022.
  • 版本控制 Git工具的使用
  • GNS3 在 Linux 上的安装指南
  • Mybatis中 list.size() = 1 但显示 All elements are null
  • Soul的社交元宇宙之路,还有多远?
  • 如何解决Memcached缓存击穿和雪崩问题
  • uniapp 开发之仿抖音,上下滑动切换视频、点击小爱心效果
  • 【C++设计模式】依赖倒转原则
  • 浙江首例!金华银行基于完全国产自研数据库构建新一代核心系统
  • ASP.NET Core 中的 静态文件
  • 2023年天府杯——C 题:码头停靠问题
  • 集丰照明|汽车美容店设计,装修色彩灯光搭配方法
  • 性能提升3-4倍!贝壳基于Flink + OceanBase的实时维表服务
  • 取数组中每个元素的最高位
  • Docker一键部署Nacos
  • 【数学建模】-- 模糊综合评价
  • Java 数据库改了一个字段, 前端传值后端接收为null问题解决
  • lnmp架构-mysql1
  • Threadlocal在项目中的应用
  • 个性化定制你的AI助手,AI指令提示词专家
  • mongodb聚合排序的一个巨坑
  • 无涯教程-分类算法 - 随机森林
  • c#常见的排序算法
  • Redis 持久化和发布订阅
  • k8s使用ECK(2.4)形式部署elasticsearch+kibana-http协议
  • [maven]关于pom文件中的<relativePath>标签
  • 11. 网络模型保存与读取
  • 新SDK平台下载开源全志V853的SDK