uniapp如何进行表单验证

通过 uni-ui 组件库的 uni-forms 组件实现表单校验：

步骤：

1. 定义校验规则
2. 修改表单结构
3. 绑定校验规则
4. 在提交时校验表单

具体描述：

1.定义校验规则

const rules:Unihelper.UniFormsRules = {
    receiver: {
     rules:[{ required: true, errorMessage:'请输入正确格式的收货人姓名' }]
  }
}

2.修改表单结构

需要把原来的form改为uni-forms，并在其中添加:rule="rules" :model="form" ref="formRef"三个属性

其中

1. :rules="rules"：这是一个属性绑定，将rules作为一个变量传递给uni-forms组件。rules通常用于定义表单字段的校验规则，以便在用户在输入时进行验证。
2. :model="form": 这也是一个属性绑定，将form作为一个变量传递给uni-forms组件。form通常用于存储表单字段的值，以便在提交表单时获取用户输入的数据。
3. ref="formRef"：这是uni-forms组件设置一个引用，以便在父组件中可以通过this.$ref.formRef来访问uni-forms组件的实例。通过引用可以调用组件的方法或者获取组件的属性。

综合起来，这段代码的作用是将rules和form传递给uni-forms组件，并设置一个引用formRef，以便在父组件中可以操作和访问uni-forms组件的实例。

同时，我们要获取表单组件实例，用于调用表单方法。

3.绑定校验规则

4.再提交时校验表单

        

综上，即可完成uniapp中对表单的验证。