iView表单验证的规则总结

type

string: 必须是字符串类型。这是默认类型
number: 必须是数字
boolean: 必须是布尔型的
method:必须是类型函数
regexp: 必须是ReGEXP的实例，或者是在创建新的ReGEXP时不会生成异常的字符串
integer:必须是整数.
float:必须是浮点数.
array: 必须是由Array.isArray确定的数组
object: 必须是类型对象而不是Array.isArray
enum: 枚举中必须存在值。
date: 按日期确定的值必须有效
url: 必须是URL类型。
hex: 必须是十六进制。
email:必须是电子邮件类型。
required:true | false
pattern :正则表达式
min: 最小值
max: 最大值
Length : 长度
enum: 验证字段是否存在其中
messages: 错误信息
trigger : ‘change’ | ‘blur’
whitespace : true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错

<Form
            ref="formModel"
            :model="addLeaseOrderForm"
            label-position="top"
            :rules="ruleValidate">
        <FormItem :label="$t('keyless_customer.add_order_user')" prop="user_name">
          <!-- <Input class="user-textarea"
                 type="textarea"
                 v-model="addLeaseOrderForm.user_name"
                 :rows="6"
                 :placeholder="$t('batteryManage.text_pls_input')">
          </Input> -->
          <input-tag
                     class="user-textarea"
                     v-model="addLeaseOrderForm.user_name">
          </input-tag>
        </FormItem>
        <FormItem :label="$t('keyless_customer.add_order_car')" prop="devices">
          <Row style="margin-bottom: 30px;">
            <div class="add-devices-button" @click="openAddDevice">
              <Icon type="md-add" />
              <span>{{$t('keyless_customer.give_title')}}</span>
            </div>
          </Row>
          <Row>
            <Table class="add-devices-detail" :columns="currentColumns" :data="formatData">
              <template slot-scope="{ row, index }" slot="add_order_table_name">
                <span class="tableProminentStyle">{{ row.add_order_table_name }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="add_order_table_car_id">
                <span class="tableProminentStyle">{{ row.add_order_table_car_id }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="sn">
                <span class="tableProminentStyle">{{ row.sn }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="vin">
                <span class="tableProminentStyle">{{ row.vin }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="action">
                <span class="tableFontStyle" @click="cancelAction(row)">取消</span>
              </template>
            </Table>
            <!-- 页码 -->
            <div class="page">
              <Page
                    show-sizer
                    :total="totalPage"
                    :current.sync="currentPage"
                    :page-size-opts="selectPageSize"
                    @on-change="changeListPage"
                    @on-page-size-change="changePageSize">
              </Page>
            </div>
          </Row>
        </FormItem>
        <Row :gutter="34">
          <Col :sm='12' :xs='24'>
          <FormItem :label="$t('keyless_customer.start_time')" prop="start_time">
            <DatePicker
                        style="width: 100%;"
                        v-model="addLeaseOrderForm.start_time"
                        type="datetime"
                        format="yyyy.MM.dd HH:mm"
                        placeholder="Select date">
            </DatePicker>
          </FormItem>
          </Col>
          <Col :sm='12' :xs='24'>
          <FormItem :label="$t('keyless_customer.end_time')" prop="end_time">
            <DatePicker
                        style="width: 100%;"
                        v-model="addLeaseOrderForm.end_time"
                        type="datetime"
                        format="yyyy.MM.dd HH:mm"
                        placeholder="Select date">
            </DatePicker>
          </FormItem>
          </Col>
        </Row>
        <FormItem :label="$t('keyless_customer.add_order_revert')" prop="revert">
          <RadioGroup v-model="addLeaseOrderForm.revert">
            <Radio label="yes" style="margin-right: 40px;">
              <span>{{$t('keyless_customer.add_order_open_revert')}}</span>
            </Radio>
            <Radio label="no">
              <span>{{$t('keyless_customer.add_order_unopen_revert')}}</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <Row>
          <base-button :value="$t('keyless_customer.submit')" :buttonHandleClick='handleSubmit'></base-button>
        </Row>
      </Form>
addLeaseOrderForm: {
          user_name: [],
          devices: [],
          start_time: '',
          end_time: '',
          revert: null,
        },
ruleValidate: {
          user_name: [{
            required: true,
            type: 'array',
            message: this.$t('rule.required'),
            trigger: "submit"
          }],
          devices: [{
            required: true,
            type: 'array',
            message: this.$t('rule.required'),
            trigger: 'submit'
          }],
          start_time: [{
            required: true,
            type: 'date',
            message: this.$t('rule.required'),
            trigger: 'submit'
          }],
          end_time: [{
            required: true,
            type: 'date',
            message: this.$t('rule.required'),
            trigger: 'submit'
          }],
          revert: [{
            required: true,
            type: 'string',
            message: this.$t('rule.required'),
            trigger: 'submit'
          }],
        },
handleSubmit() {
        this.$refs.formModel.validate(valid => {
          if (valid) {
          };
        });
      }

参考

1. Iview 表单验证的规则总结