vue3 动态表单校验规则

在 Vue3 中，可以使用 `v-model` 和 `watch` 以及 `computed` 来实现动态表单校验规则。以下是一个简单的例子：

1. 在组件中定义一个对象，用于存储表单数据和校验规则：

<template>
  <form>
    <input v-model="formData.name">
    <span v-if="errors.name">{{ errors.name }}</span>
  </form>
</template>

<script>
import { defineComponent, reactive, watch } from 'vue';

export default defineComponent({
  setup() {
    const formData = reactive({
      name: '',
    });

    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入姓名',
          trigger: 'blur',
        },
        {
          min: 2,
          max: 10,
          message: '长度在 2 到 10 个字符',
          trigger: 'blur',
        },
      ],
    });

    const errors = reactive({});

    watch(formData, () => {
      const validator = new Promise((resolve, reject) => {
        const errors = {};
        for (const key in rules) {
          const rule = rules[key];
          const value = formData[key];
          for (const r of rule) {
            if (r.required && !value) {
              errors[key] = r.message;
              reject(errors);
              return;
            }
            if (r.min && value.length < r.min) {
              errors[key] = r.message;
              reject(errors);
              return;
            }
            if (r.max && value.length > r.max) {
              errors[key] = r.message;
              reject(errors);
              return;
            }
          }
        }
        resolve();
      });
      validator
        .then(() => {
          errors.name = '';
        })
        .catch((errors) => {
          errors.name = errors.name;
        });
    });

    return {
      formData,
      errors,
    };
  },
});
</script>

2. 在模板中使用 `v-model` 绑定表单数据，使用 `v-if` 显示错误信息。

3. 在 `watch` 中监听表单数据的变化，并根据校验规则进行校验，将错误信息存储到 `errors` 对象中。

4. 使用 `reactive` 创建响应式对象，以便在模板中动态显示错误信息。

这是一个基本的例子，你可以根据需要对其进行扩展和优化。