Ant Design Vue表单校验报错

 1、使用ant-form组件的表单校验，表单有值还是校验不通过

<template>
  <div class="product-box">
    <div class="product-container">
      <div class="header">
        <div class="c_title">
          <div class="line"></div>
          <span>产品封面图播放参数设置</span>
        </div>
      </div>
      <div class="form-container">
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 6 }"
        >
          <a-form-item label="轮播展示间隔时长（秒）:" name="carouselTime">
            <a-input v-model:value="formState.carouselTime" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="轮播样式顺序:" name="carouselSort">
            <a-select v-model:value="formState.carouselSort" placeholder="请选择">
              <a-select-option :value="1">图片优先</a-select-option>
              <a-select-option :value="2">视频优先</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="footer">
        <div class="foot_btn">
          <Space :size="28">
            <a-button type="primary" @click="handleUpdate">更新</a-button>
          </Space>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import {
    Form as AForm,
    FormItem as AFormItem,
    Select as ASelect,
    SelectOption as ASelectOption,
    Input as AInput,
    message,
    Space,
  } from 'ant-design-vue';
  import {
    getProductCarouselParam,
    saveProductCarouselParam,
  } from '/@/api/jm-worker-hospital/business/productCarouselParam/productCarouselParam';
  const formRef = ref();
  const formState = ref({ carouselId: 0, carouselSort: 1, carouselTime: 2 });
  const rules = {
    carouselTime: [
      {
        required: true,
        message: '请输入轮播间隔时长',
        trigger: ['change'],
      },
    ],
    carouselSort: [
      {
        required: true,
        message: '请选择轮播样式顺序',
        trigger: ['change'],
      },
    ],
  };
  const getData = async () => {
    const res = await getProductCarouselParam();
    console.log(res.data, 'res.data');

    Object.assign(formState.value, res.data);
    console.log(formState.value, 'formState.value');
  };
  const handleUpdate = () => {
    console.log(formState.value, 'formState.value');
    formRef.value
      .validate()
      .then(() => {
        saveProductCarouselParam(formState.value).then((res) => {
          if (res.code === 200) {
            message.success('操作成功');
            getData();
          } else {
            message.error(res.message);
          }
        });
      })
      .catch((error) => {
        console.log(error, 'error');
      });
  };
  onMounted(() => {
    getData();
  });
</script>

是因为rules如果不设置type的话，type默认值为string，我这里form内的数据都是number格式所以校验不通过，rules加一个type为number就可以了

  const rules = {
    carouselTime: [
      {
        required: true,
        type: 'number',
        message: '请输入轮播间隔时长',
        trigger: ['change'],
      },
    ],
    carouselSort: [
      {
        required: true,
        type: 'number',
        message: '请选择轮播样式顺序',
        trigger: ['change'],
      },
    ],
  };