iview DatePicker 校验

iview DatePicker 校验

当日期类型为一段区间（type=“daterange”）时，页面挂载后validDate的值为[’’,’’]，所以表单验证需要对数组的每一个元素进行分开验证，并且验证的类型为type: ‘date’。

<template>
  <div>
    <Form ref="form" :model="formData" :rules="formRules" :label-width="110">
	  <FormItem label="有效期" required prop="validDate">
        <DatePicker v-model="formData.validDate" type="daterange" split-panels style="width: 100%" @on-change="handleValidDateChange"></DatePicker>
      </FormItem>
    </Form>
  </div>
</template>
<script>
  data(){
    return {
	  formData: {
	    validDate: []
	  },
	  formRules: {
	    validDate: [{
	      type: 'array', required: true,
	        fields: {
	          0: {type: 'date', required: true, message: '请输入有效期', trigger: 'blur'},
	          1: {type: 'date', required: true, message: '请输入有效期', trigger: 'blur'}
	        }
        }]
      }
    };
  },
  methods: {
  	handleValidDateChange(value){
      this.formData.validDateStart = value[0];
      this.formData.validDateEnd = value[1];
    },
  }
</script>

tips：页面挂载后validDate的值为[’’,’’]，但如果form表单用于弹窗或其他类控件时，在使用时需要重新初始化数据，那么需要将validDate的值依然初始化[’’,’’]才会正常走验证，否则
1、若初始化为[]，页面不会重新刷新，则走自带的验证validDate is required，这是需要将验证规则改为：

validDate: [{
  type: 'array', required: true, message: '请输入有效期', trigger: 'blur'
}]

2、若直接将formDate初始化{}，不单独定义validDate的值，则validDate的值为undefined，不会走验证，一直为验证通过。