重新写一个vue3的element-plus的表单验证

好的，以下是一个简单的使用 Vue 3 和 Element Plus 实现表单验证的示例：

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

<script>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  setup() {
    const form = ref({
      username: '',
      password: ''
    })

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

    const submitForm = () => {
      const formRef = refs.form

      formRef.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单
          console.log('submit form:', form.value)
        } else {
          // 表单验证失败
          console.log('form validation failed')
          return false
        }
      })
    }

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

在上面的代码中，我们使用了Vue 3的`ref`函数来定义了一个响应式变量`form`和`rules`，分别用于存储表单数据和表单验证规则。在`submitForm`方法中，我们通过`refs.form`来获取表单实例，并调用其`validate`方法进行表单验证。如果表单验证通过，则提交表单数据。如果验证失败，则返回`false`，阻止表单提交。

需要注意的是，在Vue 3中，我们需要使用`refs`来获取组件的引用。在上面的代码中，我们使用了`refs.form`来获取表单实例。