ant-design-vue中Form表单校验

页面效果

实现

		<a-form :form="form">
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="城市区域"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-cascader
                    v-decorator="[
                      'ruleForm.region_id',
                      ValidateRules.region_id,
                    ]"
                    :show-search="{ filter }"
                    :allowClear="true"
                    :fieldNames="{
                      label: 'fullname',
                      value: 'id',
                      children: 'children',
                    }"
                    :options="region_opt"
                    change-on-select
                    @change="onStationRegionChange"
                    placeholder=""
                    expandTrigger="hover"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="站点级别"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-select
                    v-decorator="[
                      'ruleForm.station_level_list',
                      ValidateRules.station_level_list,
                    ]"
                    show-search
                    mode="multiple"
                    option-filter-prop="children"
                    option-label-prop="label"
                  >
                    <a-select-option
                      v-for="(d, index) in station_level"
                      :value="d"
                      :key="index"
                      :label="d"
                      >{{ d }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="数据源"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-select
                    v-decorator="[
                      'ruleForm.program_info',
                      ValidateRules.program_info,
                    ]"
                    show-search
                    placeholder="选择数据源"
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    :allowClear="true"
                  >
                    <a-select-option
                      v-for="item in station_program_info_list"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="偏移小时"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-select
                    class="width70"
                    v-decorator="[
                      'ruleForm.offset_hour',
                      ValidateRules.offset_hour,
                    ]"
                  >
                    <a-select-option
                      v-for="item in pyhourList"
                      :value="item.value"
                      :key="item.key"
                      >{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="离线时长"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-select
                    class="width70"
                    v-decorator="[
                      'ruleForm.max_offline_hour',
                      ValidateRules.max_offline_hour,
                    ]"
                  >
                    <a-select-option
                      v-for="item in pyDurationList"
                      :value="item.value"
                      :key="item.key"
                      >{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="PM倒挂"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 15 }"
                >
                  <a-switch v-model="ruleForm.pm_upside_down" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

校验

提交