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

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

bash 复制代码
<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

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

3.validateFields设置

bash 复制代码
validateFields(rule, value, callback) {
			// 在这里编写验证逻辑
			if (value.second && value.first) {
				callback();
			} else {
				callback(new Error('请选择时间'));
			}
		},
相关推荐
難釋懷5 分钟前
解决状态登录刷新问题
java·开发语言·javascript
ヤ鬧鬧o.16 分钟前
多彩背景切换演示
前端·css·html·html5
一起养小猫24 分钟前
Flutter实战:从零实现俄罗斯方块(三)交互控制与事件处理
javascript·flutter·交互
lethelyh29 分钟前
Vue day1
前端·javascript·vue.js
酉鬼女又兒34 分钟前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海34 分钟前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大1 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
Whisper_Sy1 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 周报告实现
开发语言·javascript·网络·flutter·php
Anastasiozzzz1 小时前
leetcodehot100--最小栈 MinStack
java·javascript·算法
一起养小猫1 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter