# 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) {
};
});
}