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'},

猜你喜欢