关于#vue.js#中表单验证的问题，请专家解答！

Question

问题：有3个tab页，都在一个form表单中，当点击提交时，判断每个tab页的必填项是否都填写了，如果都填写了，则提交整个form表单，否则的话就提示用户哪个tab页的必填项没有填写（最好自动直接跳转到未填写的tab页）。

<el-form ref="form" :model="form" :rules="rules">
  <el-tabs tab-position="top">
    <el-tab-pane label="页签1" class="tab-pane">
        <el-form-item label="活动标题1" prop="value1">
          <el-input v-model="form.value1" placeholder="活动标题1" />
        </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="页签2">
      <el-form-item label="活动标题2" prop="value2">
        <el-input v-model="form.value2" placeholder="活动标题2" />
      </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="页签3">
      <el-form-item label="活动类型" prop="value3">
        <el-select v-model="form.value3" placeholder="请选择">
          <el-option v-for="dict in option" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</el-form>

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个功能，你需要在 Vue.js 中设置数据模型、表单规则（rules）、以及一个方法来检查每个tab页中的必填项是否已填写。首先，我们需要定义一个状态变量来跟踪当前选中的tab，然后在提交按钮的点击事件中遍历所有tab，并检查它们对应的必填项。

以下是一个详细的步骤：

1. 在你的Vue组件的data部分，添加以下属性：
   • activeTab：用于存储当前激活的tab索引
   • form：表单的数据模型
   • rules：表单验证规则
   • errors：存储错误信息的对象，格式为 {tabIndex: 'error message'}

export default {
  data() {
    return {
      activeTab: 0,
      form: {
        value1: '',
        value2: '',
        value3: ''
      },
      rules: {
        value1: [{ required: true, message: '请输入活动标题1', trigger: 'blur' }],
        value2: [{ required: true, message: '请输入活动标题2', trigger: 'blur' }],
        value3: [{ required: true, message: '请选择活动类型', trigger: 'change' }]
      },
      errors: {}
    };
  }
}

1. 更新el-tabs标签，给每个tab pane添加ref并绑定@input事件，用于更新activeTab：

<el-tabs :tabs="tabs" @tab-click="handleTabClick" :active-name="activeTab">

1. 添加handleTabClick方法，它会在切换tab时更新activeTab：

methods: {
  handleTabClick(tab) {
    this.activeTab = tab.name;
  }
}

1. 创建一个名为validateFormAndSubmit的方法，用于在提交按钮被点击时进行表单验证：

methods: {
  validateFormAndSubmit() {
    const errors = {};
    for (let i = 0; i < this.tabs.length; i++) {
      if (this.activeTab === this.tabs[i].name) {
        const fields = Object.keys(this.rules);
        for (const field of fields) {
          if (field.includes(`${i + 1}`)) { // 假设字段名格式为"value1", "value2", "value3"
            if (!this.$refs.form.validateField(field)) {
              errors[i] = this.errors[field];
            } else {
              delete this.errors[field];
            }
          }
        }
      }
    }

    if (Object.keys(errors).length > 0) {
      console.error('请先解决以下错误：', errors);
      return false;
    } else {
      // 提交表单逻辑
      // ...
      console.log('表单验证通过，可以提交');
    }
  }
}

1. 最后，在你的HTML中添加一个提交按钮，并调用validateFormAndSubmit方法：

<el-button type="primary" @click="validateFormAndSubmit">提交</el-button>

这样，每次点击提交按钮时，都会检查当前激活的tab页中的必填项是否已经填写。如果没有填写，会打印出相应的错误消息。如果所有必填项都填写了，就可以继续执行提交操作。

注意：这里的实现依赖于字段名与tab页的关联性（例如，“value1”，“value2”，“value3”）。如果你的实际项目中字段名与tab页的关联方式不同，你可能需要修改validateFormAndSubmit方法中的相关部分，以便正确地匹配字段和tab页。