在Vue3中使用element-plus,如何进行el-form的表单验证

可以使用Vue3中内置的v-model以及element-plus中提供的el-form和el-form-item组件，设置相应的验证规则和提示信息即可。

示例代码如下：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="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 { ElMessage } from 'element-plus';

export default {
  name: 'FormValidation',
  setup() {
    const formData = ref({
      username: '',
      password: '',
    });
    const formRules = ref({
      username: [{
        required: true,
        message: '请输入用户名',
        trigger: 'blur',
      }],
      password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      }],
    });
    const submitForm = () => {
      // 提交表单操作
      const form = ref('form');
      form.value.validate((valid) => {
        if (valid) {
          // 验证通过执行提交操作
          ElMessage.success('提交成功');
        } else {
          ElMessage.warning('请填写完整信息');
          return false;
        }
      });
    };
    return {
      formData,
      formRules,
      submitForm,
    };
  },
};
</script>

在这个示例中，我们使用了ref来创建响应式对象formData和formRules，formData用于存放表单数据，formRules用于存放表单的验证规则。

el-form组件作为表单容器，通过ref="form"指定参考名称，然后通过:model绑定formData数据模型，用:rules绑定表单验证规则。

el-form-item组件作为表单元素的包裹容器，通过label属性指定标签文字，再使用prop属性命名表单元素的key，与表单验证规则对应。

验证规则定义可包括以下属性：

- required：表示是否为必填字段
- message：表示验证不通过时的提示信息
- trigger：表示触发验证的事件，默认为blur

最后，在提交表单时，我们使用validate方法对表单进行验证，需要在回调函数中判断验证结果并作出相应操作。