用vue3和element-plus写一个表单验证

好的，下面是一个简单的示例：

1. 首先安装 vue3 和 element-plus：

npm install vue@next
npm install element-plus

2. 在组件中引入需要的 element-plus 组件和相关方法：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm">
    <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('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import { useForm } from '@ant-design-vue/use';

export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const { form, resetFields, validate } = useForm({
      username: '',
      password: '',
    });

    const rules = {
      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 = async () => {
      try {
        await validate();
        console.log('submit!');
      } catch (error) {
        console.log('error', error);
      }
    };

    const resetForm = () => {
      resetFields();
    };

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

3. 在 setup() 函数中使用 @ant-design-vue/use 提供的 useForm() 方法创建表单对象，并定义相关规则。使用 validate() 方法进行表单验证，validate() 方法返回一个 Promise，如果验证通过，则会 resolve，否则会 reject 并返回错误信息。

以上示例中，我们使用了 element-plus 的 ElForm、ElFormItem、ElInput、ElButton 组件，以及 vue3 的 defineComponent() 和 setup() API。

希望这个示例对您有所帮助！