关于ant design vue3框架的form表单验证功能

<template>
 <a-button type="primary" @click="showModal">新增</a-button>
 <a-modal v-model:visible="visible" :title="表单验证">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="名称" name="name" :rules="[{ required: true,                     
                 message: '产品名称不能为空' }]">
                <a-input v-model:value="formState.name" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item label="价格" name="price" :rules="[{ required: true,         
                 message: '价格不能为空' }]">
                <a-input v-model:value="formState.price" placeholder="请输入价格" />
          </a-form-item>
    </a-form>

    <template #footer>
          <a-button @click="cancel">取消</a-button>
          <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
 </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
//弹框
const visible = ref(false);

//开打弹框
const showModal = () => {
    visible.value = true;
};

//表单数据
let formState = reactive({
    name: '',
    price: '',
});

//表单验证
const formRef = ref(null);

//新增或者编辑 保存
const handleOk = () => {
    (formRef).value.validate().then(() => {
            save(formState);
            cancel();
    }).catch(() => {
        console.log('失败');
    });

};

//取消弹框
const cancel = () => {
    formState.name= '';
    formState.price= '';
    (formRef).value.clearValidate();//取消规则提示
    visible.value = false;
}

</script>