Vue3 Element Plus 表单组件：带校验与重置功能的示例代码

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="form.age"></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 setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

const form = ref({
  name: '',
  age: ''
});

const rules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
});

const submitForm = () => {
  const form = ref.value;
  form.validate(valid => {
    if (valid) {
      console.log('submit');
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};

const resetForm = () => {
  const form = ref.value;
  form.resetFields();
};

</script>
<style>
/* CSS样式可以写在这里 */
</style>