vue3使用element-plus的表单验证

在 Vue3 中使用 Element-Plus 的表单验证，可以按照以下步骤进行：

1. 安装 Element-Plus 和 Vee-Validate（Element-Plus 使用 Vee-Validate 进行表单验证）：

npm install element-plus vee-validate@next

2. 在 main.js 中导入 Element-Plus 和 Vee-Validate：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import { defineRule, ErrorMessage, configure } from 'vee-validate'
import { required, email } from '@vee-validate/rules'

const app = createApp(App)

app.use(ElementPlus)

defineRule('required', required)
defineRule('email', email)
app.component('ErrorMessage', ErrorMessage)

configure({
  generateMessage: (ctx) => {
    const messages = {
      required: `${ctx.field}不能为空`,
      email: `${ctx.field}格式不正确`
    }

    const message = messages[ctx.rule.name]
    return message.replace('{field}', ctx.field)
  }
})

app.mount('#app')

3. 在组件中定义表单：

<template>
  <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { useForm } from 'vee-validate'

export default {
  setup() {
    const { form, handleSubmit, setErrors, errors } = useForm()

    const rules = {
      username: [
        { required: true, message: '请输入用户名' }
      ],
      email: [
        { required: true, message: '请输入邮箱' },
        { email: true, message: '邮箱格式不正确' }
      ]
    }

    const submitForm = handleSubmit(() => {
      // 表单提交逻辑
    })

    return {
      form,
      rules,
      submitForm
    }
  }
}
</script>

在上述代码中，我们使用 `useForm` 方法来定义表单验证相关的逻辑。其中，`rules` 定义了每个表单元素的验证规则，`handleSubmit` 方法用于表单提交的回调函数，`setErrors` 和 `errors` 用于设置和获取表单验证错误信息。

在模板中，我们使用 Element-Plus 的表单组件来渲染表单元素，并且使用 `v-model` 指令将表单元素和表单数据进行绑定。在表单提交时，调用 `handleSubmit` 方法来触发表单验证并执行表单提交逻辑。