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('请选择时间'));
			}
		},
相关推荐
kkce4 分钟前
域名CDN检测意义
服务器·前端·网络
北辰alk5 分钟前
Vue 表单修饰符 .lazy:性能优化的秘密武器
vue.js
北辰alk6 分钟前
`active-class`:Vue Router 链接组件的激活状态管理
vue.js
北辰alk7 分钟前
Vue Router 参数传递:params vs query 深度解析
vue.js
ZoeLandia8 分钟前
Qiankun 生命周期与数据通信实战
前端·微前端·qiankun
LawrenceLan9 分钟前
Flutter 零基础入门(十五):继承、多态与面向对象三大特性
开发语言·前端·flutter·dart
北辰alk12 分钟前
Vue 3 Diff算法革命:比双端比对快在哪里?
vue.js
二川bro16 分钟前
详细解析 cesiumViewer.render() 和 requestAnimationFrame(render)
前端
前端付豪20 分钟前
必知Node应用性能提升及API test 接口测试
前端·react.js·node.js
boooooooom24 分钟前
手写简易Vue响应式:基于Proxy + effect的核心实现
javascript·vue.js