如何解决vue3+elementuiPlus新进入表单页面会触发校验

在 Vue3 中使用 Element Plus 的表单组件时，新进入表单页面触发验证可能是由于组件初始化时默认进行了数据校验或者一些生命周期钩子如 `beforeCreate` 或 `created` 中设置了初始校验规则。为了避免这种现象，你可以按照以下步骤调整：

1. **避免在 `data` 钩子中预设校验状态**：如果你在 `data()` 函数中直接设置了一些必填字段并赋予了错误信息，可以移除这一步骤。

// 不推荐
export default {
  data() {
    return {
      form: {
        name: '',
        email: { required: true, message: '请输入邮箱', trigger: 'blur' }, // 移除或修改这部分
      },
    };
  },
};

2. **控制何时执行验证**：通常在用户交互（如点击提交按钮）时才开始验证。可以将验证放入 `beforeSubmit` 或 `validate` 方法，例如 Element Plus 提供的 `el-form` 组件的 `validate` 方法。

<template>
  <el-form ref="form" :model="form" :rules="rules" @submit.prevent="handleSubmit">
    <!-- ... -->
  </el-form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单有效，执行其他操作
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
  data() {
    return {
      form: {},
      rules: {} // 可能需要自定义验证规则
    };
  },
};
</script>

通过这种方式，只有当用户实际尝试提交时，才会触发验证。