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('请选择时间'));
			}
		},
相关推荐
白杨SEO营销7 小时前
白杨SEO:看“20步:从0-1做项目的笨办法”来学习如何选一个项目做及经验分享
前端·学习
叫我詹躲躲7 小时前
Vue 3 组件开发最佳实践:可复用组件设计模式
vue.js
AY呀7 小时前
# 🌟 JavaScript原型与原型链终极指南:从Function到Object的完整闭环解析 ,深入理解JavaScript原型系统核心
前端·javascript·面试
用户434662153137 小时前
无废话之 useState、useRef、useReducer 的使用场景与选择指南
前端
GinoWi7 小时前
HTML标签 - 表格标签
前端
氤氲息7 小时前
鸿蒙 ArkTs 的WebView如何与JS交互
javascript·交互·harmonyos
码是生活7 小时前
老板:能不能别手动复制路由了?我:写个脚本自动扫描
前端·node.js
小皮虾7 小时前
护航隐私!小程序纯前端“证件加水印”:OffscreenCanvas 全屏平铺实战
前端·javascript·微信小程序
chushiyunen7 小时前
未设置X-XSS-Protection响应头安全漏洞
前端·xss
yingjuxia菜鸟com7 小时前
制作一个简单的HTML个人网页
前端