iview 表单自定义校验规则

iview提供自定义校验规则，但做表单验证时可能会使用到组件中的响应式数据，配合自定义规则实现表单校验功能

html代码：

<Form  ref="formData" :model="formData" :rules="ruleValidate" >
     <FormItem  prop="date" label="选择时间" >         
         <DatePicker 
            v-model="formData.date"
            type="date"
            placeholder="请选择日期"            
         ></DatePicker>
      </FormItem> 
</Form>

vue组件中js中的代码：

data() {
    return {
       formData: {},
       //校验规则
       ruleValidate: { 
          // date绑定的html中的时间组件
          date: [
              {
                 // 日期改变时调用this.validateDate方法进行校验，此方法中可以使用响应式数据
                 validator: this.dateRule,
                 trigger: 'change'
              }
           ]
       }
    }
}

在methods中定义校验的方法：

methods: {
    dateRule(rule, value, callback) {
         // 注意:不管有没有校验规则，最后都要调用callback才会生效
         // 进行日期格式化
         let time = dateFormat(value, 'yyyy-MM-dd') 
         if (!value) {
             callback(new Error('请选择时间'))
         } else if (timeGroup.indexOf(time) > -1) {
             callback(new Error('选择的日期已存在'))
         } else {
             // 将得到的日期转化为秒，之后比较大小
             let currentTime = new Date(value).getTime()
             let timeGapList = []
             timeGroup.map(item => {
                 item = new Date(item).getTime()
                 timeGapList.push(item)
             })
             // 查找出数组中最大值最小值
             let max = Math.max.apply(null, timeGapList)
             let min = Math.min.apply(null, timeGapList)
             if (currentTime > min && currentTime < max) {
                 callback(new Error('不可选择中间日期，请重新选择日期'))
             }
         }
         // 最后要执行一下回调，不然不会触发校验
         callback()
    }
}