vue3 表单验证

Vue 3 中可以使用 VeeValidate 4.x 来进行表单验证。以下是简单的使用步骤：

1. 安装 VeeValidate 4.x：

   npm install vee-validate@next

2. 在 main.js 中引入和使用 VeeValidate：

   import { createApp } from 'vue'
   import { createRouter, createWebHistory } from 'vue-router'
   import App from './App.vue'
   import { defineRule, configure } from 'vee-validate'
   import { required, email } from '@vee-validate/rules'
   import { Field, Form, ErrorMessage } from 'vee-validate'

   defineRule('required', required)
   defineRule('email', email)

   configure({
     generateMessage: ({ field, rule }) => {
       const messages = {
         required: `${field} is required`,
         email: `${field} must be a valid email`
       }
       return messages[rule]
     }
   })

   const app = createApp(App)
   const router = createRouter({
     history: createWebHistory(),
     routes: []
   })

   app.use(router)
   app.component('Form', Form)
   app.component('Field', Field)
   app.component('ErrorMessage', ErrorMessage)

   app.mount('#app')

3. 在需要验证的表单中使用 `<Form>` 和 `<Field>` 组件：

   <template>
     <Form @submit.prevent="submit">
       <Field name="email" label="Email" type="email" rules="required|email" v-model="form.email" />
       <ErrorMessage name="email" />

       <Field name="password" label="Password" type="password" rules="required" v-model="form.password" />
       <ErrorMessage name="password" />

       <button type="submit">Submit</button>
     </Form>
   </template>

在上面的代码中，`<Field>` 组件的 `name` 属性必须和 `v-model` 绑定的表单数据字段名相同，`rules` 属性中可以使用多个规则，用 `|` 分隔。

4. 在组件中定义表单数据和提交方法：

   import { ref } from 'vue'

   export default {
     setup() {
       const form = ref({
         email: '',
         password: ''
       })

       const submit = () => {
         console.log('Form submitted:', form.value)
       }

       return {
         form,
         submit
       }
     }
   }

以上是一个简单的 Vue 3 表单验证实现方法，具体可以根据实际需求进行调整。