问题:下文中的案例是投放时间与更新时间两个DatePicker的关联,投放时间不可大于更新时间 解决:
对Form标签设置ref="addOrUpdateInfoRef" ruleValidate="ruleValidate"在下面的ruleValidate中使用this.$refs.addOrUpdateInfoRef.fields[校验规则的index]修改校验状态validateDisabled 是否校验 validateState 展示状态(校验错误时此处值为 ‘error’)validateMessage 错误提示文字扩展:也可以在methods:{}中方法调用修改对应的表单校验项的状态
<Form ref="addOrUpdateInfoRef" :model="addOrUpdateInfo" :label-width="110" :rules="ruleValidate"> <FormItem label="投放时间" class="ivu-form-item-required"> <FormItem label="" prop="putInTime"> <DatePicker :disabled="addOrUpdateType===1" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="投放时间" :options="datePickOpt" v-model="addOrUpdateInfo.putInTime"></DatePicker> </FormItem> </FormItem> <FormItem label="更新时间" class="ivu-form-item-required"> <FormItem label="" prop="refreshTime"> <DatePicker :disabled="addOrUpdateType===1" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="更新时间" :options="datePickOpt" v-model="addOrUpdateInfo.refreshTime"></DatePicker> </FormItem> </FormItem> </From> ruleValidate: { putInTime: [ { required: true, pattern: /.+/, message: '请选择投放时间', trigger: 'change' }, { validator: (rule, value, callback) => { if (this.addOrUpdateInfo.refreshTime) { const _this = (new Date(value)).getTime() const refreshTime = (new Date(this.addOrUpdateInfo.refreshTime)).getTime() if (_this > refreshTime) { return callback(new Error('投放时间不可大于更新时间')) } else { // validateDisabled 是否校验 // validateState 展示状态(校验错误时此处值为 'error') // validateMessage 错误提示文字 this.$refs.addOrUpdateInfoRef.fields[2].validateState = '' this.$refs.addOrUpdateInfoRef.fields[2].validateMessage = '' callback() } } else { callback() } }, required: false, trigger: 'change' } ], refreshTime: [ { required: true, pattern: /.+/, message: '请选择更新时间', trigger: 'change' }, { validator: (rule, value, callback) => { if (this.addOrUpdateInfo.putInTime) { const _this = (new Date(value)).getTime() const putInTime = (new Date(this.addOrUpdateInfo.putInTime)).getTime() if (_this < putInTime) { return callback(new Error('更新时间不可小于于投放时间')) } else { // validateDisabled 是否校验 // validateState 展示状态(校验错误时此处值为 'error') // validateMessage 错误提示文字 this.$refs.addOrUpdateInfoRef.fields[1].validateState = '' this.$refs.addOrUpdateInfoRef.fields[1].validateMessage = '' callback() } } else { callback() } }, required: false, trigger: 'change' } ] }