iview -- form表单验证

清疚 2021-09-19 12:52 542阅读 0赞

### 前言 ###

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>