共计 1514 个字符，预计需要花费 4 分钟才能阅读完成。
我的项目中有两个 el-time-picker，除了在提交的时候须要做校验来提醒用户抉择开始工夫和完结工夫之外。
还有一个要求就是抉择的开始工夫不能晚于完结工夫，否则提醒，
抉择的完结工夫不能早于开始工夫，否则提醒，
最终应用的是提供的 ’validator’ 进行解决实现的
代码如下：
| <el-form-item label="行驶工夫"> | |
| <el-row :gutter="20" stype="width:100%;"> | |
| <el-col :span="me, trigger:'blur' } | |
| ]"> | |
| <el-time-picker | |
| @change="verifyTime('start')" | |
| v-model="ruleForm.startTime" | |
| type="datetime" | |
| format='HH:mm' | |
| value-format="HH:mm" | |
| placeholder="开始工夫"> | |
| </el-time-picker> | |
| </el-form-item> | |
| </el-col> | |
| <el-col :span="11"> | |
| <el-form-item label="完结工夫" prop="endTime" :rules="[{ required: true, message: '请抉择完结工夫', trigger: 'change'}, | |
| {validator: validateTime, trigger: 'blur'} | |
| ]"> | |
| <el-time-picker | |
| @change="verifyTime('end')" | |
| v-model="ruleForm.endTime" | |
| type="datetime" | |
| format='HH:mm' | |
| value-format="HH:mm" | |
| placeholder="完结工夫"> | |
| </el-time-picker> | |
| </el-form-item> | |
| </el-col> | |
| </el-row> | |
| </el-form-item> | |
| 而后是定义的校验规定办法（methods）：// 首先是点击开始验证完结，完结验证开始 | |
| verifyTime(val){if(val == 'start'){this.$refs.ruleForm.validateField('endTime') | |
| } | |
| if(val == 'end'){this.$refs.ruleForm.validateField('startTime') | |
| } | |
| }, | |
| // 提交的时候验证开始工夫和完结工夫 | |
| validateTime(rule, value, callback){if(rule.field == "startTime"){if (value === '') {callback(new Error('请抉择开始工夫')); | |
| } else if (this.ruleForm.endTime && moment('2022-01-01' + value).valueOf() > moment('2022-01-01' + this.ruleForm.endTime).valueOf()) {callback(new Error(this.startTips)); | |
| } else {callback(); | |
| } | |
| } | |
| if(rule.field == "endTime"){if (value === '') {callback(new Error('请抉择完结工夫')); | |
| } else if (this.ruleForm.startTime && moment('2022-01-01' + value).valueOf() < moment('2022-01-01' + this.ruleForm.startTime).valueOf()) {callback(new Error(this.endTips)); | |
| } else {callback(); | |
| } | |
| } | |
| }, |
正文完
