antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法

1、带星号且校验

<a-form-item label="测站名称" v-bind="validateInfos.name">
  <a-input
    onkeyup="value=value.replace(/[, ]/g,'')"
    v-model:value="formData.name"
    placeholder="请输入测站名称"
  />
</a-form-item>
<script setup>
import { reactive, inject, ref } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
const url = inject("url");
const formData = reactive({
  name: undefined,
});
// 校验规则
const rulesRef = reactive({
  name: [
    {
      required: true,
      message: "请输入测站名称",
    },
  ]
});
const { validate, validateInfos, resetFields } = useForm(formData, rulesRef);
defineExpose({
  validate,
  resetFields,
});
</script>

2、带星号不校验

<a-form-item label="测站名称" required>
  <a-input
    onkeyup="value=value.replace(/[, ]/g,'')"
    v-model:value="formData.name"
    placeholder="请输入测站名称"
  />
</a-form-item>
<script setup>
import { reactive, inject, ref } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
const url = inject("url");
const formData = reactive({
  name: undefined,
});
const rulesRef = ref({});
const { validate, resetFields } = useForm(formData, rulesRef);
defineExpose({
  validate,
  resetFields,
});
</script>

3、不带星号不校验

<a-form-item label="测站名称">
  <a-input
    onkeyup="value=value.replace(/[, ]/g,'')"
    v-model:value="formData.name"
    placeholder="请输入测站名称"
  />
</a-form-item>
<script setup>
import { reactive, inject, ref } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
const url = inject("url");
const formData = reactive({
  name: undefined,
});
const rulesRef = ref({});
const { validate, resetFields } = useForm(formData, rulesRef);
defineExpose({
  validate,
  resetFields,
});
</script>

4、注意点的是：const { validate, resetFields } = useForm(formData, rulesRef); 里useForm的参数，必须要含有rulesRef参数，否则警告

5、点开useForm.js查看源码

6、还有一点就是，rulesRef 的定义不能赋值null，会报错，应使用const rulesRef = ref({}) 或 const rulesRef = reactive({})

一旦你热爱生活，生活就会教你治愈一切的魔法。