1.需求描述
编辑页面需要做日期控件类型type="datetimerange"的表单校验
2.使用场景
规则管理--》编辑弹窗表单校验
3.问题描述
日期控件类型type="datetimerange"或者 type="daterange" 的表单校验不提示错误信息
4.解决思路
修改规则,代码如方案
5.解决方案 (已解决加入)
<Form-item label="全天/时间范围" prop="run_time">
<DatePicker :value="formValidate.run_time" @on-change="selectTime" @on-clear="clearTime" type="datetimerange" placement="bottom-end" placeholder="开始时间-结束时间" style="width: 500px"></DatePicker>
</Form-item>
⚠️注意:这里使用 :value 不要使用v-model
data () {
return {
formValidate: {
run_time: []
}
规则校验如下:
ruleValidate: {
run_time: [{
type: 'array',
required: true,
fields: {
0: { required: true, message: '请选择全天/时间范围', trigger: 'change' },
1: { required: true, message: '请选择全天/时间范围', trigger: 'change' }
}
}]
终极方案--》如以上还是无法实现,请自行自定义校验方法,如下:
ruleValidate: {
run_time: [{ required: true, validator: validateTime }]
}
⚠️注意:这里使用v-model
然后再data( ){ //todo 校验的方法}
const validateTime = (rule, value, callback) => {
if (value.length == 0 || value[0] == '' || value[1] == '') {
callback(new Error('请选择时间'))
} else {
callback()
}
}
OK,收工!如果可以实现记得点赞分享,谢谢老铁~