关于elementui 验证问题 验证某个值大于另外一个值
2024-09-08 10:58:42
elementui ui表单验证区间
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
<el-form-item
:rules="[{ minTime: ruleForm.available_after, validator: validateRate, trigger: 'blur' },{required: true, message: '上线时间', trigger: 'blur'}]"
label="上线时间" prop="available_after">
<el-date-picker
v-model="ruleForm.available_after"
format="yyyy-MM-dd HH:mm"
placeholder="选择上线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item
:rules="[{ maxTime: ruleForm.available_before, validator: validateRate, trigger: 'blur' },{required: true, message: '下线时间', trigger: 'blur'},]"
label="下线时间" prop="available_before">
<el-date-picker
v-model="ruleForm.available_before"
format="yyyy-MM-dd HH:mm"
placeholder="选择下线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item label="">
<el-button size="small" type="primary" @click="submitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
//上线时间 下线时间验证
validateRate(rule, value, callback) {
if (this.ruleForm.available_before === '' && this.ruleForm.available_after === '') {
callback(new Error('请选择时间'))
} else if (this.ruleForm.available_before == '' && this.ruleForm.available_after || this.ruleForm.available_after == '' && this.ruleForm.available_before) {
callback()
} else if (this.ruleForm.available_before <= this.ruleForm.available_after) {
callback(new Error('上线时间不能大于下线时间'))
} else {
if (this.$refs.ruleForm.fields[3].validateMessage) {
this.$refs.ruleForm.fields[3].clearValidate();
}
if (this.$refs.ruleForm.fields[4].validateMessage) {
this.$refs.ruleForm.fields[4].clearValidate();
}
callback();
}
},
最新文章
- sql查询中datetime显示的格式为yyyy-DD-mm
- 浅谈2D游戏设计模式2- WZ文件详解（UI.WZ）之MapLogin.img(1)
- 【原】js检测移动端横竖屏
- 对于(function(){}())和function(){}实例的作用域分析（里面有很多问题……）
- 列车时刻表查询 jqm/ajax/xml
- 屏幕输出VS文件输出
- Eclipse启动tomcat 报“ A child container failed during start”
- TCP建立连接和释放的过程，及TCP状态变迁图
- UVALive 3486/zoj 2615 Cells（栈模拟dfs）
- PS基础学习 2---图层蒙版
- 想做Android Wear开发？你得先搞明白这四件事
- Spring碎点知识
- PHP 字符串替换
- DotNetCore跨平台~System.DrawingCore部署Linux需要注意的
- PhpStorm中如何使用Xdebug工具，入门级操作方法
- git pull error
- SpringCloud教程 | 第八篇: 消息总线(Spring Cloud Bus)
- GRU and LSTM
- ABAP 创建function model 返回参数为内表类型
- BZOJ5305 HAOI2018苹果树（概率期望+动态规划）