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参数,否则警告
![在这里插入图片描述](https://img-blog.csdnimg.cn/65ea9aea32a24c66a23a390a23fad758.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
5、点开useForm.js查看源码
![在这里插入图片描述](https://img-blog.csdnimg.cn/3c386374193a4adaa8daae1d04664ea2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
6、还有一点就是,rulesRef 的定义不能赋值null,会报错,应使用const rulesRef = ref({}) 或 const rulesRef = reactive({})
![在这里插入图片描述](https://img-blog.csdnimg.cn/e34edcb9b8f24209ac84f2f4ca66d967.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/f456df41a0d24b1f9ea55c73f1a85064.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
一旦你热爱生活,生活就会教你治愈一切的魔法。