iview -- form表單驗證

前言

    iview中from表單的驗證默認只驗證string類型，這就導致number、date、array等類型的from項不能進行驗證
     注意：Select from驗證主要是看Select的值的類型

<template>
<Form ref="formRef" :model="formData" :rules="rules" @submit.native.prevent>
  <FormItem label="標題" prop="title">
    <Input v-model.trim="formData.title" placeholder="請輸入標題" />
  </FormItem>
  <FormItem label="投資行業" prop="industries">
    <Select v-model="formData.industries" multiple filterable>
      <Option v-for="item in dic.investIndustry" :value="item.code" :key="item.code">{{ item.name}}</Option>
    </Select>
  </FormItem>
  <FormItem label="類型" prop="type">
    <Select v-model="formData.type">
      <Option v-for="s in dic.courseType" :key="s.code" :label="s.name" :value="s.code" />
    </Select>
  </FormItem>
  <FormItem label="狀態" prop="state">
    <Select v-model="formData.state">
      <Option v-for="s in dic.state" :key="s.code" :label="s.name" :value="s.code" />
    </Select>
  </FormItem>
  <FormItem label="狀態" prop="state">
    <Select v-model="formData.state">
      <Option v-for="s in dic.state" :key="s.code" :label="s.name" :value="s.code" />
    </Select>
  </FormItem>
  <FormItem label="緯度" prop="lat">
    <Input v-model.trim="formData.lat" disabled placeholder="請選擇地址" />
  </FormItem>
  <FormItem label="價格" prop="price">
    <InputNumber v-model.trim="formData.price" placeholder="請輸入價格" :min="0" />
  </FormItem>
  <FormItem label="報名起止時間" prop="signUpDate">
    <DatePicker
      type="datetimerange"
      format="yyyy-MM-dd HH:mm:ss"
      placeholder="請選擇報名起止時間"
      style="width: 100%;"
      :options="signUpOptions"
      :value="[formData.signUpFrom,formData.signUpTo]"
      @on-change="changeSignDate">
    </DatePicker>
  </FormItem>
  <FormItem label="活動起止時間" prop="activityDate">
    <DatePicker
      type="datetimerange"
      format="yyyy-MM-dd HH:mm:ss"
      placeholder="請選擇活動起止時間"
      style="width: 100%;"
      :options="activityOptions"
      :value="[formData.startTime,formData.endTime]"
      @on-change="changeDate">
    </DatePicker>
  </FormItem>
</Form>
</template>
<script>
export default {
  name: 'SelectRules',
  data () {
    return {
      signUpOptions: {}, // 報名時間區間選擇
      activityOptions: {}, // 活動時間區間選擇
      rules: {
        title: [{ required: true, message: '標題不能爲空', trigger: 'blur' }], // string驗證
        type: [{ required: true, message: '類型不能爲空', trigger: 'blur' }], // select string驗證 
        industries: [{ required: true, type: 'array', message: '類型不能爲空', trigger: 'blur' }], // 數組驗證
        state: [{ // select驗證（轉爲string）
          required: true,
          message: '狀態不能爲空',
          trigger: 'blur',
          transform: value => value.toString()
        }],
        lat: [{ // input爲Number的驗證 （判斷並轉爲string）
          required: true,
          message: '緯度不能爲空',
          trigger: 'blur',
          transform (value) {
            if (!value) return ''
            return value.toString()
          }
        }],
        price: [{ // InputNumber驗證（轉爲string）
          required: true,
          message: '價格不能爲空',
          trigger: 'blur',
          transform: value => value.toString()
        }],
        signUpDate: [{ // 雙日期選擇驗證
          type: 'array',
          required: true,
          fields: {
            0: { required: true, message: '請選擇報名起止時間' },
            1: { required: true, message: '請選擇報名起止時間' }
          },
          trigger: 'blur'
        }],
        activityDate: [{
          type: 'array',
          required: true,
          fields: {
            0: { required: true, message: '請選擇活動起止時間' },
            1: { required: true, message: '請選擇活動起止時間' }
          },
          trigger: 'blur'
        }],
      }
    }
  },
  mounted () {
     // 日期選擇限制
    this.signUpOptions = {
      disabledDate: date => {
        // 86400000 爲一天
        return date && date.valueOf() < Date.now() - 86400000
      }
    }
    this.activityOptions = {
      disabledDate: date => {
        return date && date.valueOf() < new Date(this.formData.signUpTo).getTime() + 86400000
      }
    }
  },
  methods: {
    // 日期選擇
    changeSignDate (date) {
      this.formData.signUpFrom = date[0]
      this.formData.signUpTo = date[1]
      // 日期選擇器驗證
      this.formData.signUpDate = [this.formData.signUpFrom, this.formData.signUpTo]
      // 日期選擇限制
      this.activityOptions = {
        disabledDate: date => {
          return date && date.valueOf() < new Date(this.formData.signUpTo).getTime() + 86400000
        }
      }
    },
  }
}
</script>