VUE3使用element-plus表单验证

在 Vue3 中使用 Element Plus 进行表单验证，需要先安装 Element Plus 和 VeeValidate（Element Plus 依赖于 VeeValidate）。安装命令如下：

npm install element-plus vee-validate@next

安装完成后，可以在 main.js 中引入并注册 Element Plus 和 VeeValidate：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import VeeValidatePlugin from './plugins/vee-validate'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(VeeValidatePlugin)

app.mount('#app')

VeeValidate 需要在 plugin 中进行注册。可以先创建一个 plugins 文件夹，然后在其中创建一个 vee-validate.js 文件：

import { defineRule, configure } from 'vee-validate'
import { required, email } from '@vee-validate/rules'

export default {
  install: (app) => {
    // 配置
    configure({
      generateMessage: ({ field, rule }) => {
        const messages = {
          required: `${field}不能为空`,
          email: `${field}格式不正确`
        }
        return messages[rule]
      }
    })

    // 定义规则
    defineRule('required', required)
    defineRule('email', email)
  }
}

这里定义了两个规则：required 和 email。然后在组件中使用：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <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 { reactive } from 'vue'
import { useVeeValidate } from '@vee-validate/vue3'

export default {
  setup() {
    const { form, handleSubmit, validate } = useVeeValidate({
      initialValues: {
        email: ''
      }
    })

    const rules = {
      email: 'required|email'
    }

    const submitForm = () => {
      validate().then((result) => {
        if (result.valid) {
          console.log('提交成功')
        }
      })
    }

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

这里使用了 VeeValidate 提供的 useVeeValidate hook，它返回了一个 form 对象、handleSubmit 方法和 validate 方法。form 对象包含了表单的所有数据，handleSubmit 方法用于提交表单，validate 方法用于验证表单。rules 对象定义了表单验证规则。