Bootstrap

iveiw 时间验证

最近遇到在使用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'},

;