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' },
      		{ message: '长度不符合要求', len: 2, 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()
        }],
        //  只显示星号，不发挥作用（默认赋值为0时）
 	   orderNo: [{ type: 'number', required: true, message: '排序不能为空', trigger: 'blur' }],
        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>