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('请选择时间'));
			}
		},
相关推荐
咖啡の猫4 分钟前
TypeScript编译选项
前端·javascript·typescript
找方案7 分钟前
hello-agents 学习笔记:解锁智能体三大经典范式,从原理到实战
javascript·笔记·学习·hello-agents
想学后端的前端工程师9 分钟前
【Vue3响应式原理深度解析:从Proxy到依赖收集】
前端·javascript·vue.js
Rhys..18 分钟前
js-箭头函数
开发语言·javascript·ecmascript
资深低代码开发平台专家21 分钟前
厌倦JavaScript 框架桎梏?Still.js:用原生之力,解遗留系统之困
开发语言·javascript·ecmascript
纟 冬25 分钟前
Flutter & OpenHarmony 运动App运动目标设定组件开发
开发语言·javascript·flutter
2501_9444460025 分钟前
Flutter&OpenHarmony应用内导航与路由管理
开发语言·javascript·flutter
小徐不会敲代码~34 分钟前
Vue3 学习 5
前端·学习·vue
_Kayo_35 分钟前
vue3 状态管理器 pinia 用法笔记1
前端·javascript·vue.js
How_doyou_do35 分钟前
工程级前端智能体FrontAgent
前端