最近遇到在使用iview框架时,在商家后端管理系统中,在合同发布时会使用到form表单组件,当然日期也通常出现在搜索 框表单中,但是有时候会出现日期组件校验错误的情况
首先,iview采用的是async-validator的校验规则,根据规则校验类型type值一般分为以下几种:
string、method、number、boolean、array、object、date、integer、float、regexp、email、url、hex;
其次,大家都知道日期组件一般肯定想到的是 type="date" ,先看下日期组件值的value类型,可以
自己打印看下;
第一种情况: 单选日期(只有一个日期), value值为:“2019-06-10”;
第二种情况: 多选日期(只有一个日期), value值为:["2019-06-10","2019-06-12"],未选中值时默认的结构为[" "," " ];
由此可以看出,如果仅仅用一个 type: "array",来校验多选日期肯定是无效的,因为默认虽然是空,但是值的结构是一个数组,怎么校验都是真。所以我们需要对每个子元素进行校验;
通过分析,我们发现,表单校验时,我们需要选择和日期的值相匹配的类型,
当日期单选时我们可以选择:type:"date",
当日期多选时,我们需要对每一个子元素添加校验(fields)代码如下:
如果是datetime 类型
此时是因为 是拼合的两个的样式,所以要用的是array 中套的两个的验证方法
{ required: true, type: 'array',
fields:{
0:{required: true, type:'date',message: '有效期不能为空', trigger: 'change'},
1:{required: true, type:'date',message: '有效期不能为空', trigger: 'change'}
},
trigger: 'change'},