不用typescript写一个element-plus的表单验证

好的，以下是一个使用element-plus和vue3的表单验证示例，不使用typescript:

<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-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const form = ref({
      username: '',
      password: '',
    });

    const rules = ref({
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    });

    const submitForm = () => {
      const { value: formRef } = this.$refs.form;
      formRef.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以在这里提交数据或者执行其他操作
          ElMessage.success('提交成功');
        } else {
          // 表单验证失败，弹出错误提示
          ElMessage.error('表单验证失败，请检查您的输入');
        }
      });
    };

    const resetForm = () => {
      const { value: formRef } = this.$refs.form;
      formRef.resetFields();
    };

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

这是一个基本的表单验证示例，使用了element-plus的`ElForm`和`ElFormItem`组件，以及vue3的`ref`和`setup`函数。在`setup`函数中，我们定义了表单的数据和验证规则，并且定义了提交表单和重置表单的方法。在提交表单的方法中，我们首先通过`this.$refs.form`获取到`ElForm`组件的引用，然后调用`validate`方法进行表单验证。如果表单验证通过，则可以在此处提交表单数据或执行其他操作，否则我们会弹出一个错误提示。在重置表单的方法中，我们同样通过`this.$refs.form`获取到`ElForm`组件的引用，并调用`resetFields`方法重置表单。