uni-ui vue3 setup 表单校验

Uni-UI 是一个基于 Vue.js 3.x 开发的 UI 组件库，它提供了一些常用的 UI 组件和一些常用的功能组件，比如表单校验。在 Vue 3.x 中，可以使用 `setup` 函数来定义组件，同时也可以使用 Vue 3.x 的 Composition API 来编写表单校验逻辑。

对于表单校验，Uni-UI 提供了 `validator` 组件来进行校验，使用方法如下：

1. 在 `template` 中引入 `validator` 组件，并为其绑定需要校验的数据项和校验规则。
2. 在 `setup` 函数中引入 `useValidator` 方法，并将需要校验的数据项和校验规则作为参数传递给该方法。
3. 在 `setup` 函数中调用 `useValidator` 方法并将其返回值绑定到模板中，以便在模板中使用校验结果。

下面是一个简单的示例：

<template>
  <validator :rules="rules" v-model="formData">
    <input v-model="formData.username" />
    <input v-model="formData.password" />
    <button @click="submit">提交</button>
  </validator>
</template>

<script>
import { useValidator } from 'uni-ui';

export default {
  setup() {
    const rules = {
      username: [
        { required: true, message: '用户名不能为空' },
        { min: 6, max: 16, message: '用户名长度必须在 6 到 16 个字符之间' },
      ],
      password: [
        { required: true, message: '密码不能为空' },
        { min: 8, max: 20, message: '密码长度必须在 8 到 20 个字符之间' },
      ],
    };

    const formData = ref({
      username: '',
      password: '',
    });

    const { validate } = useValidator(formData, rules);

    const submit = () => {
      validate()
        .then(() => {
          // 校验通过，提交表单数据
        })
        .catch((errors) => {
          // 校验未通过，提示错误信息
        });
    };

    return {
      rules,
      formData,
      submit,
    };
  },
};
</script>