1.引入Form，FormItem组件

import { Card,Col, Row, Button,FormItem,Form,Table,Modal,Input,Upload} from "iview";

2.Form,FormItem 绑定

<Form class="mg-top-20" ref="formInline"  :model="formInline" :rules="ruleValidate">
          <FormItem label="类型名称" prop="cateName" :label-width="100">
                <Input :placeholder="typePlaceHolder"  v-model="formInline.cateName"  />
            </FormItem>
</Form>
ref:formInline  用于最后提交获取Form表单的实例
model：formInline   用于绑定整个表单
rules:ruleValidate  用于定义的验证器data
prop:cateName   用于表单验证与绑定属性一致

实例

1.<Form class="mg-top-20" ref="formInline"  :model="formInline" :rules="ruleValidate">
          <Row>
            <Col span="20" offset="2">
              <!-- 联系邮箱： 请输入内容-->
              <FormItem label="类型名称" prop="cateName" :label-width="100">
                <Input :placeholder="typePlaceHolder"  v-model="formInline.cateName"  />
              </FormItem>
            </Col>
          </Row>
  </Form>

2.data(){
     const DayTimeRegex = (rule, value, callback) => {
       let DayTimeRegex = /^[1-9]+$/;
       if (value === '') {
         callback(new Error('内容不能为空'));
       } else if (!DayTimeRegex.test(value)) {
         callback(new Error('请输入大于0的整数'))
       } else {
         callback();
       }
     };

    return {}
注意写在return上方
3.写在return中
ruleValidate:{
        rewardName:[  { required: true, message: '奖品内容 不能为空', trigger: 'blur', } ],
        dayTime:[  { required: true, validator:DayTimeRegex }],
        allDayCurrent:[  { validator:AllDayCurrentRegex} ],
        discountName:[  { required: true, message: '优惠券名 不能为空', trigger: 'blur', } ],
        money:[  { required: true, validator:MoneyRegex }, ],
        thresholdMoney:[  { required: true, validator:DayTimeRegex } ],
        dateRangeTime:[  { required: true, validator:DayTimeRegex } ],
        dateNumberTime:[  { required: true, validator:DayTimeRegex} ],
        textareaInfo:[  { required: true, message: '使用说明 不能为空', trigger: 'blur', } ],

      }