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

心若向阳(*￣︶￣)

已于 2022-04-11 15:03:04 修改

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人项目 vue+ vite + antdv ant-design vue 文章标签： Form表单 useForm antd vue3 表单校验

于 2022-04-11 14:51:17 首次发布

本文链接：https://blog.csdn.net/agua001/article/details/124098456

"本文介绍了Ant Design Vue中表单验证的三种情况：带星号且校验、带星号不校验和不带星号不校验，并提供了详细的代码示例。强调了`useForm`使用时必须包含`rulesRef`参数以避免警告，同时指出`rulesRef`定义不应赋值为`null`，应使用`ref({}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
im