Vue Form 自定应校验规则 和Ant Design自带的校验规则

<!--
 * @Author: dev-tokyo
 * @Date: 2021-10-26 09:53:56
 * @LastEditTime: 2021-11-19 18:20:14
 * @LastEditors: your name
 * @Description: 
 * @FilePath: \today-stock-cms\src\views\goods\addGoods\AddGoods.vue
-->
<template>
  <a-form
    :model="formState"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    class="cms-form"
  >
    <a-form-item label="批次号" v-bind="addGoodsInfo.batchNumber">
      <a-input
        v-model:value="formState.batchNumber"
        type="text"
        maxLength="20"
      />
    </a-form-item>
    <a-form-item label="商品标题" v-bind="addGoodsInfo.bidHead">
      <a-input v-model:value="formState.bidHead" />
    </a-form-item>
    <a-form-item label="商品品牌" v-bind="addGoodsInfo.bidBrands">
      <a-input v-model:value="formState.bidBrands" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit" :loading="loading"
        >提交</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { Form } from "ant-design-vue";
import type { ValidationRule } from "ant-design-vue/lib/form/Form";
type ValidatorFunc = (rule: ValidationRule, value: string) => Promise<void>;

export default defineComponent({
  setup() {
    const useForm = Form.useForm;

    const formState = reactive<FormState>({
      batchNumber: "",
      bidHead: "",
      bidBrands: "",
    });
    const loading = ref<boolean>(false);

    const rejectFunc = (reason: string) => Promise.reject(new Error(reason));
    // 批次号验证
    const regex = /^\d{0,20}$/;
    const validatePhone: ValidatorFunc = (rule, value) => {
      if (value === "") {
        return rejectFunc("请输入正确的批次号！");
      }
      if (regex.test(value)) {
        return Promise.resolve();
      }
      return rejectFunc("请输入正确的批次号！");
    };

    const addGoodsRules = reactive({
      batchNumber: [
        { validator: validatePhone, required: true, trigger: "change" },
      ],
      bidHead: [{ required: true, message: "请输入商品标题！" }],
      bidBrands: [{ required: true, message: "请输入商品品牌！" }],
    });

    const { validate, validateInfos: addGoodsInfo } = useForm(
      formState,
      addGoodsRules
    );

    return {
      labelCol: { style: { width: "150px" } },
      wrapperCol: { span: 14 },
      addGoodsInfo,
      loading,
    };
  },
});
</script>

我用的是 useForm 基本表单的用法

详细的在 Ant Design 官网