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('请选择时间'));
			}
		},
相关推荐
2501_9418705610 小时前
从配置频繁变动到动态配置体系落地的互联网系统工程实践随笔与多语言语法思考
java·前端·python
百度地图汽车版11 小时前
【AI地图 Tech说】第二期:一文解码百度地图ETA
前端
恋猫de小郭11 小时前
罗技鼠标因为服务器证书过期无法使用?我是如何解决 SSL 证书问题
android·前端·flutter
Sailing11 小时前
AI 流式对话该怎么做?SSE、fetch、axios 一次讲清楚
前端·javascript·面试
橙露11 小时前
Vue3 组件通信全解析:技术细节、适用场景与性能优化
前端·javascript·vue.js
扉间79811 小时前
lightrag嵌入思路
前端·chrome
toooooop811 小时前
Vuex Store实例中`state`、`mutations`、`actions`、`getters`、`modules`这几个核心配置项的区别
前端·javascript·vue.js
LYFlied11 小时前
Rust代码打包为WebAssembly二进制文件详解
开发语言·前端·性能优化·rust·wasm·跨端
OpenTiny社区11 小时前
历时1年,TinyEditor v4.0 正式发布!
前端·javascript·vue.js