uni-app中vue3表单校验失败

目录

1.问题

2.原因及解决方式

3.表单校验方式（vue3）

---

1.问题

在app中使用uni-forms表单，并添加校验规则，问题是即使输入内容，表单校验依然失败。

代码：

2.原因及解决方式

表单绑定的数据不正确，外面需要套一层ref，声明响应式数据绑定到表单中。之前的那个写法确实不报错，但是不能把表单中输入的数据更新到formData中，导致校验一直报错。

修改前：	
let formData = resetForm();
修改后：
let formData = ref(resetForm());

3.表单校验方式（vue3）

定义校验规则-》修改表单结构-》绑定表单数据-》提交时校验

表单规则中各个项目的id要和表单中form-item中的name属性一致。

在vue中表单数据通过ref方式进行定义。

表单中需要追加rule，ref及model，分别定义校验规则，表单及表单绑定的数据

提交表单时校验方式有好几种。主要是先定义表单实例，通过表单实例中的value的validate判断校验是成功还是失败。

我上面的代码中一共有4中校验方式。第二种前端会报错，可以参照下其他几种方式。