如何在Vue3中处理表单验证？

在 Vue3 中处理表单验证通常使用官方推荐的 `v-model-shallow`、自定义指令或者第三方库如 VeeValidate 或者 Easy-Validation。以下是几种常见的方法：

1. **自定义指令**：
通过定义自定义 directives 可以对 `<input>` 等元素进行实时验证，例如 `v-model.trim` 可以去除输入框两端的空白字符。

Vue.directive('required', {
  bind(el, binding, vnode) {
    el.addEventListener('input', function (e) {
      if (!el.value) {
        vnode.context.$emit('update:error', '该字段不能为空');
      } else {
        vnode.context.$emit('update:error', null);
      }
    });
  }
});

然后在模板上使用：

<input v-model="username" required>
<span v-if="errors.required">该字段不能为空</span>

2. **VeeValidate**：
这是一个强大的验证库，可以定义复杂的规则，支持实时验证和提交验证。首先安装并引入库，然后在组件内设置验证规则：

npm install vee-validate

import VeeValidate from 'vee-validate'

// 在setup中初始化验证器
const validate = useValidator();

export default {
  setup() {
    // ...
    const errors = reactive({});

    onMounted(() => {
      validate.init({
        fields: {
          username: { rules: 'required', messages: { required: '请输入用户名' } },
          password: { rules: 'min:6', messages: { min: '密码至少需要6位' } },
        }
      });
    });

    // 提交验证
    const handleSubmit = async () => {
      await validate.validateAll();
      if (validate.passes()) {
        // 执行登录逻辑...
      }
    };

    return { errors, handleSubmit };
  }
};

3. **Easy-Validation**：
类似 VeeValidate，提供轻量级的验证功能。同样先安装，然后配置和使用。

选择哪种方式取决于项目需求和个人喜好，以及团队是否已经采用了某个特定的验证库。