vue3+element-plus 表单验证

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

1. 安装 Element Plus 和 VeeValidate

npm install element-plus vee-validate@next

2. 在 main.js 中引入 Element Plus 和 VeeValidate

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, min, max, email } from '@vee-validate/rules'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

// 注册 VeeValidate 规则
defineRule('required', required)
defineRule('min', min)
defineRule('max', max)
defineRule('email', email)

// 配置 VeeValidate
configure({
  generateMessage: ({ field, rule }) => {
    const messages = {
      required: `${field}不能为空`,
      min: `${field}至少为${rule.params.min}个字符`,
      max: `${field}不能超过${rule.params.max}个字符`,
      email: `${field}必须是有效的邮箱地址`
    }
    return messages[rule.name] || `${field}无效`
  }
})

app.component('ErrorMessage', ErrorMessage)

app.mount('#app')

3. 在组件中使用 VeeValidate

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
      <error-message name="username"></error-message>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
      <error-message name="password"></error-message>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent } from 'vue'
import { useVeeValidate } from '@vee-validate/vue3'

export default defineComponent({
  setup() {
    const { handleSubmit, resetForm, errors, setErrors } = useVeeValidate()

    const form = {
      username: '',
      password: ''
    }

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 16, message: '用户名长度在 6 到 16 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' }
      ]
    }

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

    return {
      form,
      rules,
      submitForm,
      resetForm,
      errors,
      setErrors
    }
  }
})
</script>

在这个例子中，我们使用了 `useVeeValidate()` hook 来管理表单验证，定义了一个 `form` 对象来存储表单数据，定义了 `rules` 对象来定义表单验证规则，使用了 `handleSubmit()` 方法来触发表单提交逻辑，并且使用了 `ErrorMessage` 组件来展示错误信息。